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分析，并执行弹出窗口工作所需的所有工作。问题是：有没有办法告诉 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>

Answer 2

“根据最新的bootstrap文档，隐式调用类似$（'。popover'）的东西。不需要popover（），但是，它不起作用。”

我无法在文档的任何地方找到说明这一点。事实上，他们的观点恰恰相反。也就是说，Twitter Bootstrap 不会自动初始化页面上的弹出窗口或工具提示。 From the docs：

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

为了“选择加入”，正如他们所说，你会将Popover对象附加到一个元素，该元素包含可能出现在页面上的所有弹出窗口。这是一种方法：

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

我认为最初考虑的性能考虑来自2.1之前的事实，Popover插件默认由 mouseenter 和 mouseleave 事件触发，这些事件当然是不是你想要整个页面不断处理的东西。

从2.1开始，默认为点击，这不会造成任何性能问题。但是，如果您可以确定DOM附近的元素而不是要附加Popover对象的body，则始终是首选元素。但是，根据您显示AJAX内容的位置，body可能是您最好的选择。

Answer 3

这是一个包含对象数组的完整工作示例，我将ko.applyBindings()更改为ko.applyBindingsToDescendants以包含绑定上下文$ root和$ parent，当我们想要将按钮关联到例如函数在根视图模型中。

$(element).click(function() {
            $(this).popover('toggle');
            var thePopover = document.getElementById(attribute.id+"-popover");
            childBindingContext = bindingContext.createChildContext(viewModel);
            ko.applyBindingsToDescendants(childBindingContext, thePopover);
    });

看看@ http://jsfiddle.net/mounir/Mv3nP/6/

与knockout.js的Bootstrap popover

3 个答案: