12

我有一个应用程序通过 AJAX 调用接收一些数据。之后，接收到的数据使用knockout.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 分析，并执行所有需要的工作以使 popover 工作。还有问题：有没有办法告诉bootstrap.js在收到 AJAX 响应后对数据执行类似的工作？或者怎样才能达到这样的要求？

4

3 回答 3

25

您可以创建自定义 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>​
于 2012-08-27T15:21:21.200 回答
7

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

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

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

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

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

我相信最初考虑的性能考虑来自于在 2.1 之前，Popover 插件默认由 mouseenter 和 mouseleave 事件触发，这当然不是您希望为整个页面不断处理的事情。

从 2.1 开始，现在默认为click，这不会造成任何性能问题。然而，如果您可以确定一个比 DOM 更远的元素，而不是body将 Popover 对象附加到该元素，那始终是首选。但是，根据您显示 AJAX 内容的位置，body可能是您最好的选择。

于 2012-08-27T15:03:50.893 回答
0

这是一个包含对象数组的完整工作示例，我将其更改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/

于 2012-10-24T15:18:49.840 回答