Всплывающая подсказка Bootstrap не работает с привязками к нокауту? (w скрипка)

Код:

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". Я думаю, это потому, что этот элемент DOM недоступен до тех пор, пока не будет нажата функция triggerIcon. Но в приложении я должен привязать эти всплывающие подсказки к множеству разных элементов и предпочел бы делать это один раз, в одном месте, вместо того, чтобы привязывать привязку к функции triggerIcon. как это можно достичь?

Ответ 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/

Ответ 2

Добавление к ответу @RP Niemeyer...

В github существует небольшой проект Knockout-Bootstrap для создания "богатых двухсторонних взаимодействий с привязками Bootstrap и Knockout".

Ниже представлена вилка вашей скрипки, которая включает в себя нокаут-бутстрап.

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>

Ответ 3

Я также столкнулся с некоторыми проблемами, связанными с привязкой всплывающей подсказки с нокаутом, и ответ, предложенный RP Niemeyer, помог мне. Но потом, когда я попытался привязать к функции, которая возвращает объект options всплывающей подсказки, это не было вызвано (он был вызван только один раз). Поэтому он не работал, если я пытался динамически изменять заголовок всплывающей подсказки на основе отображенных классов 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"
}};

Я хотел бы сделать это замечание здесь, потому что я думаю, что это было бы полезно в тех случаях, когда название всплывающей подсказки должно меняться динамически.

Ответ 4

Ответ, предоставленный Ади Михасаном, почти сработал для меня. Мне пришлось внести следующие изменения, которые также могут помочь другим.

$(element).tooltip("destroy");

$(element).tooltip("dispose");

$(element).data("bs.tooltip").options.title = options.title

от

до

$(element).data("bs.tooltip").config.title = options.title