使用knockout.js 的Bootstrap 弹出窗口 [英] Bootstrap popover with knockout.js

问题描述

我有一个应用程序通过 AJAX 调用接收一些数据.之后，接收到的数据使用 knockout.js 库绑定到 DOM 元素.我想使用 boostrap 的不显眼的标记来创建这样的弹出框:

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

根据最新的 bootstrap 文档，不需要像 $('.popover').popover() 这样的隐式调用，但是，它不起作用.

我想，boostrap.js 会在 document.ready 上执行一些 DOM 分析并执行所有需要的工作以使 popover 工作.问题是:有没有办法告诉 bootstrap.js 在收到 AJAX 响应后对数据执行类似的工作?或者如何才能达到这种要求?

解决方案

您可以创建自定义数据绑定来使该元素弹出.检查这个 jsfiddle 演示

ko.bindingHandlers.bootstrapPopover = {初始化:函数(元素，valueAccessor，allBindingsAccessor，viewModel){var 选项 = ko.utils.unwrapObservable(valueAccessor());var defaultOptions = {};options = $.extend(true, {}, defaultOptions, options);$(element).popover(options);}};var viewModel = {项目:ko.observableArray([{身份证":1，"title": "title-1","info": "info-1"},{身份证":2，"title": "title-2","info": "info-2"},{身份证":3，"title": "title-3","info": "info-3"}])}ko.applyBindings(viewModel);

和 html

<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 }">信息</a></td></tr>
</div>

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>

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

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?

解决方案

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);​

And 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>​

这篇关于使用knockout.js 的Bootstrap 弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！