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分析を実行し、ポップオーバーが機能するために必要なすべての作業を実行すると思います。そして質問： AJAX応答を受信した後、 bootstrap.jsにデータに対して同様のジョブを実行するように指示する方法はありますか？または、この種の要件をどのように達成できますか？

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 データ API はオプトインされています。これらを使用する場合は、セレクター オプションを指定するだけです。

彼らが言うように、「オプトイン」するには、ページに表示される可能性のあるすべてのポップオーバーを含む要素に Popover オブジェクトをアタッチします。これを行う1つの方法は次のとおりです。

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

最初に念頭に置いていたパフォーマンスの考慮事項は、2.1 より前のバージョンでは、Popover プラグインがデフォルトでmouseenterおよびmouseleaveイベントによってトリガーされていたという事実から来ていると思います。

2.1 以降、デフォルトはclickになりました。パフォーマンスの問題は発生しません。それにもかかわらず、Popover オブジェクトをアタッチする要素よりも DOM のさらに下の要素を決定できる場合は、body常に優先されます。ただし、AJAX コンテンツを表示している場所によってはbody、最善の策となる場合があります。

于 2012-08-27T15:03:50.893 に答える
0

オブジェクトの配列を使用した完全な動作例を次に示します。たとえば、ボタンをルート ビューモデルの関数に関連付ける場合は、バインド コンテキスト $root および $parent を含めるように変更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/をご覧ください

于 2012-10-24T15:18:49.840 に答える