ajax – Bootstrap popover与knockout.js

发布时间：2020-12-16 03:06:18 所属栏目：百科来源：网络整理

导读：我有一个应用程序通过 AJAX调用接收一些数据.之后,收到的数据使用knockout.js库绑定到DOM元素.我想使用boostrap的不引人注意的标记来创建这样的popovers： table class="table table-condensed" data-bind="foreach: items" tr tdb data-bind="text: $data.i

我有一个应用程序通过 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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!