ajax - 带有 knockout.js 的 Bootstrap 弹出窗口

Question

我有一个应用程序通过 AJAX 调用接收一些数据。之后，接收到的数据使用 knockout.js 库绑定(bind)到 DOM 元素。我想使用 boostrap 的不显眼的标记来创建这样的弹出框:

<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 demo

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>​