引导酥料饼与knockout.js(Bootstrap popover with knockout.

我有一个应用程序通过AJAX调用接收的一些数据。 在此之后，接收到的数据结合使用knockout.js库DOM元素。 我想使用的自举的不显眼的标记来创建这样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>

根据最新的引导文件中，像隐式调用$('.popover').popover()不是必需的，但是，它不工作。

我想，这boostrap.js执行上的document.ready一些DOM分析并执行酥料饼的工作所需的所有工作。 而这样的问题：是有一些方法来告诉bootstrap.js收到Ajax响应后执行数据类似的工作？ 或者怎么样的要求能否实现？

Answer 1:

您可以创建自定义的数据绑定，使该元素酥料饼。 选中此的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:

“根据最新的引导文件中，像$隐式调用（‘酥料饼’）。酥料饼（）不是必需的，但是，它不工作。”

我不能在规定的文档的任何地方找到。 事实上，他们的状态正好相反。 也就是说，Twitter的引导不会自动初始化页面上popovers或提示。 从文档 ：

出于性能的考虑，工具提示和酥料饼的数据的API选择。如果你想使用它们只是指定选择选项。

为了“选择加入”，他们说，你的酥料饼的对象附加到它包含了所有可能的网页中出现popovers的元素。 下面是这样做的一种方式：

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

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

由于2.1，默认是现在点击 ，这应该不会构成任何表演的问题。 不过，如果你能进一步确定元素下来DOM比body ，用来连接的酥料饼的对象，那就是总是首选。 然而，这取决于你在哪里显示AJAX内容， body可能是你最好的选择。

Answer 3:

这里是对象的数组一个完整的工作示例，我改变了ko.applyBindings()来ko.applyBindingsToDescendants包括结合上下文$根$父当我们想在根视图模型，例如一个按钮的功能相关联。

$(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/

文章来源: Bootstrap popover with knockout.js