与knockout.js的Bootstrap popover

Question

我有一个应用程序通过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响应后执行类似的数据工作？或者如何实现这种要求？

Answer 1

您可以创建自定义dataBinding以使该元素弹出.检查这个jsfiddle演示

ko.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>?

Answer 2

"根据最新的bootstrap文档,隐式调用类似$('.popover')的东西.不需要popover(),但它不起作用."

我在文档中的任何地方都找不到.事实上,他们的情况恰恰相反.也就是说,Twitter的引导并不会自动初始化页面上popovers或提示. 来自文档:

出于性能原因,Tooltip和Popover data-apis是可选的.如果您想使用它们,只需指定一个选择器选项.

正如他们所说,为了"选择加入",您可以将Popover对象附加到包含可能出现在页面上的所有弹出窗口的元素.这是一种方法:

$('body').popover({selector: '[rel="popover"]'});

我相信性能方面的考虑最初记住,之前2.1来自这个事实酥料饼的插件被默认被触发的mouseenter和鼠标离开事件,这肯定不是你想为整个页面不断地处理事情.

从2.1开始,默认现在是click,这不会造成任何性能问题.但是,如果您可以确定DOM附近的元素而不是body附加Popover对象的元素,那么这始终是首选.但是,根据您显示AJAX内容的位置,body可能是您最好的选择.