我有一个应用程序通过
AJAX调用接收一些数据.之后,收到的数据使用knockout.js库绑定到DOM元素.我想使用boostrap的不引人注意的标记来创建这样的popovers：
<table class="table table-condensed" data-bind="foreach: items">
<tr>
<td><b data-bind="text: $data.id"></b></td>
<td data-bind="text: $data.title"></td>
<td><a href="#" rel="popover" data-bind="attr: {title: $data.info}" data-placement="top">Info</a></td>
</tr>
</table>
根据最新的bootstrap文档,不需要像$(‘.popover’),popover()这样的隐式调用,但是它不起作用.
我想,boostrap.js对document.ready执行一些DOM分析,并执行popover工作所需的所有工作.问题是：有没有办法告诉bootstrap.js在收到AJAX响应后对数据执行类似的工作？或者这样的要求可以如何实现？
您可以创建自定义数据绑定以使该元素popover.检查这个
jsfiddle demo
原文链接：https://www.f2er.com/ajax/160088.htmlko.bindingHandlers.bootstrapPopover = {
init: function(element,valueAccessor,allBindingsAccessor,viewmodel) {
var options = ko.utils.unwrapObservable(valueAccessor());
var defaultOptions = {};
options = $.extend(true,{},defaultOptions,options);
$(element).popover(options);
}
};
var viewmodel = {
items: ko.observableArray([{
"id": 1,"title": "title-1","info": "info-1"},{
"id": 2,"title": "title-2","info": "info-2"},{
"id": 3,"title": "title-3","info": "info-3"}])
}
ko.applyBindings(viewmodel);
和html
<div class="container">
<div class="hero-unit">
<table class="table table-condensed" data-bind="foreach: items">
<tr>
<td><b data-bind="text: $data.id"></b></td>
<td data-bind="text: $data.title"></td>
<td><a href="#" data-bind="bootstrapPopover : {content : $data.info }">Info</a></td>
</tr>
</table>
</div>
</div>
