ブートストラップのツールチップがノックアウトバインディングで動作していませんか？ （フィドルワット）

Question

フィドル：http://jsfiddle.net/LkqTU/9399/

コード：ツールヒントは '.card-削除ボタン' のため表示されないいくつかの理由

var ViewModel = function (first, last) { 
    var self = this; 
    self.showIcon = ko.observable(false); 
    self.triggerIcon = function() { 
     self.showIcon(true); 
    }; 
}; 
$('.card-delete-button').tooltip({ 
    'placement': 'top', 
     'title': 'Text' 
}); 
ko.applyBindings(new ViewModel("Planet", "Earth")); 

。 triggerIcon関数がヒットするまでDOM要素が利用できないからだと思います。しかし、アプリケーションでは、これらのツールチップをさまざまな要素にバインドする必要があり、トリガーIcon関数にバインディングを張るのではなく、1か所で1回行う方が好きです。どのようにこれを達成することができますか？

Answer 1

このような状況では、マークアップのどこにでもツールチップを配置できるカスタムバインディングを作成することをお勧めします。ここで

は、結合ツールチップの一の実装である：

ko.bindingHandlers.tooltip = { 
    init: function(element, valueAccessor) { 
     var local = ko.utils.unwrapObservable(valueAccessor()), 
      options = {}; 

     ko.utils.extend(options, ko.bindingHandlers.tooltip.options); 
     ko.utils.extend(options, local); 

     $(element).tooltip(options); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).tooltip("destroy"); 
     }); 
    }, 
    options: { 
     placement: "right", 
     trigger: "click" 
    } 
}; 

あなたは、その後のようなあなたのページにこのバインディングを使用します。

<input data-bind="value: name, tooltip: { title: help, trigger: 'hover' }" /> 

あなたはグローバルオプションを設定し、何でもあなたと一緒にそれらを上書きすることができますバインディングにパスします。

テンプレートとコントロールフローのシナリオに入ると、カスタムバインディングを使用すると、コードをいつ呼び出すかを手動で知らなくても、適切なタイミングで自動的に初期化（およびクリーンアップ）されるため、本当に役立ちます。ここで

はサンプルです：@RPニーマイヤーの答えにhttp://jsfiddle.net/rniemeyer/BF5yW/

Answer 2

補遺...

githubの上で「ブートストラップおよびノックアウトバインディングを持つ豊かな双方向の対話」を作るためのKnockout-Bootstrapと呼ばれる小さなプロジェクトがあります。

以下はノックアウト・ブートストラップを含むあなたのフィドルのフォークです。

http://jsfiddle.net/qZkXP/

<div class='liveExample' data-bind="event: {mouseover: triggerIcon}"> 
    <!-- ko if: showIcon --> 
    <a class="card-delete-button" 
     data-bind="tooltip: {title: 'Another tooltip', placement: 'right'}"> 
      <i class="icon-trash"></i> 
    </a> 
    <!-- /ko --> 
</div> 

Answer 3

私もノックアウトと結合するツールチップに関するいくつかの問題が発生し、RPニーマイヤーが提供する答えは私を助けました。しかし、ツールチップのオプションオブジェクトを返す関数にバインドしようとすると、呼び出されなかった（一度だけ呼び出された）。したがって、マップされたCSSクラスに基づいて、ツールチップのタイトルを動的に変更しようとしていた場合は機能しませんでした。だから、私が見つけた解決策は以下のとおりです。

ko.bindingHandlers["tooltip"] = { 
'init': function (element, valueAccessor) { 
    var local = ko.utils.unwrapObservable(valueAccessor()); 
    var options = {}; 

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options); 
    ko.utils.extend(options, local); 

    $(element).tooltip(options); 

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).tooltip("destroy"); 
    }); 
}, 
'update': function (element, valueAccessor) { 
    var local = ko.utils.unwrapObservable(valueAccessor()); 
    var options = {}; 

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options); 
    ko.utils.extend(options, local); 

    $(element).data("bs.tooltip").options.title = options.title; 
}, 
options: { 
    placement: "top", 
    trigger: "click" 
}}; 

私はツールチップのタイトルを動的に変更する必要がある場合には、それらの例に有用であろうと思うので、私はここに、この発言を作りたかったです。