引导popover与knockout.js [英] Bootstrap popover with knockout.js

问题描述

我有一个应用程序通过AJAX调用接收的一些数据。在此之后，使用获得的 knockout.js 的库中的数据绑定到DOM元素。我想使用的自举的不显眼的标记，用于创建popovers是这样的：

I've got an application receiving some data through AJAX-call. After that, received data binds to DOM-elements using knockout.js library. I'd like to use boostrap's unobtrusive markup for creating popovers like this:

<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（）不需要但是，它不工作。

According to the latest bootstrap documentation, implicit call of something like $('.popover').popover() isn't required, however, it's not working.

我想，那的 boostrap.js 的执行一些DOM-分析的document.ready和执行的popover工作所需的全部工作。而这样的问题：是有一些方法来告诉的 bootstrap.js 的接收Ajax响应之后执行数据类似的工作？要不怎么这样的要求能否实现？

I suppose, that boostrap.js perform some DOM-analysis on document.ready and perform all needed work for popover to work. And the question: is there some way to tell bootstrap.js to perform similar job for data after receiving AJAX response? Or how this kind of requirements can be achieved?

推荐答案

您可以创建自定义数据绑定，使该元素popover。勾选此的jsfiddle演示

You can create custom dataBinding to make that element popover. Check this 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>​

这篇关于引导popover与knockout.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！