Bootstrap popover与kickout.js

小编典典

Bootstrap popover与kickout.js

ajax

我有一个应用程序通过AJAX调用接收一些数据。之后，接收到的数据将使用 kickout.js
库绑定到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>

根据最新的 引导程序 文档，$('.popover').popover()不需要类似之类的隐式调用，但是，它不起作用。

我想， boostrap.js
在document.ready上执行了一些DOM分析，并执行了所有必要的工作才能使弹出窗口正常工作。问题是：是否有某种方法可以告诉
bootstrap.js 在收到AJAX响应后对数据执行类似的工作？还是可以实现这种要求？

阅读 282

2020-07-26

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

2020-07-26