26

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

コード:

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

何らかの理由で、「.card-delete-button」のツールチップが表示されません。それは、triggerIcon 関数がヒットするまでその DOM 要素が使用できないためだと思います。しかし、アプリケーションでは、これらのツールチップをさまざまな要素にバインドする必要があり、バインドを triggerIcon 関数に貼り付けるのではなく、1 か所で 1 回実行することをお勧めします。これはどのように達成できますか?

4

4 に答える 4

61

このような状況で最善の策は、マークアップ内の任意の場所にツールヒントを配置するために使用できるカスタム バインドを作成することです。

ツールチップ バインディングの 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' }" />

オプションをグローバルに設定してから、バインディングに渡すものでそれらをオーバーライドできます。

テンプレート化と制御フローのシナリオに入る場合、カスタム バインドを使用すると非常に役立ちます。これは、コードをいつ呼び出すかを手動で知る必要なく、適切なタイミングで自動的に初期化 (およびクリーンアップ) されるためです。

ここにサンプルがあります:http://jsfiddle.net/rniemeyer/BF5yW/

于 2013-06-01T18:39:17.453 に答える
7

@RP Niemeyerの回答への補遺...

github には、 「Bootstrap および Knockout バインディングとの豊富な双方向対話」を行うためのKnockout-Bootstrapと呼ばれる小さなプロジェクトがあります。

以下は、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>
于 2013-06-01T18:55:00.203 に答える
4

また、ノックアウトとのツールチップのバインドに関していくつかの問題が発生し、RP Niemeyer から提供された回答が役に立ちました。しかし、ツールチップのオプション オブジェクトを返す関数にバインドしようとすると、呼び出されませんでした (一度だけ呼び出されました)。そのため、マップされた 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"
}};

ツールチップのタイトルを動的に変更する必要がある場合に役立つと思うので、ここでこの発言をしたかったのです。

于 2015-12-16T11:25:58.233 に答える