Tooltipster не применяется к динамическим элементам нокаута

Я пытаюсь получить всплывающие подсказки для некоторого динамического контента, сгенерированного из нокаута. Это простой список, в котором есть название и кнопки редактирования / удаления (которые мне нужны во всплывающей подсказке). Он заполняется через вызов Parse.com, но я воссоздал его упрощенную версию.

Вот HTML-код:

<body>
<button class="tooltip" title="This one works">Static... it works</button>
<ul data-bind="foreach: fields">
    <li>
        <div data-bind="text: name"></div>
        <div class="field_buttons">
            <button class="tooltip" title="Edit this field">Edit</button>      
            <button class="tooltip" title="Delete this field">Delete</button>
        </div>
    </li>
</ul>
</body>

И JS:

var ViewModel = function() {
    this.fields = ko.observableArray([
        { name: 'Apples' } ,
        { name:'Oranges' } ,
        { name: 'Grapes' },
        ])
}

// apply to static elements
$(".tooltip").tooltipster();

// add some data
ko.applyBindings(new ViewModel()); 

// I load some data sometime later and call this again to apply it to the dynamic content - why doesn't this work?
$(".tooltip").tooltipster();

Скрипки:

http://jsfiddle.net/rYSH2/10/

Что мне не хватает?

Источник

1 ответ

Решение

Я бы, вероятно, пошел за подходом создания bindingHandler для всплывающей подсказки. Это очень легко сделать. Вот очень упрощенный bindingHandler, который позволяет вам предоставить опции для плагина всплывающей подсказки для каждого элемента, если вы хотите (однако этот bindingHandler не обновляется, если параметры меняются, даже если они наблюдаемы, но смотрите документацию по созданию пользовательских привязок если вы хотите создать привязку):

ko.bindingHandlers['tooltipster'] = {
    init: function(element, valueAccessor){
        $(element).tooltipster(ko.unwrap(valueAccessor()));
    }
};

Вы бы тогда использовали это как:

<button title="tooltip contents" data-bind="tooltipster: { position: 'right' }">Do Stuff</button>

или же

<button data-bind="tooltipster: { content: 'Tooltip contents'}">Do Stuff</button>

или, если ваша связанная viewmodel имеет свойство с именем tooltip (с более точным написанием bindingHandler подсказка может измениться, если tooltip свойство наблюдается и изменяется):

<button data-bind="tooltipster: { content: tooltip }">Do stuff</button>

Это избавит от необходимости находить элементы по имени класса, не вызовет плагин для одного и того же элемента несколько раз и позволит вам передавать уникальные (или одни и те же) параметры для каждой подсказки, если вы захотите. Это, например, также позволит вам указать content опция, чтобы разрешить более сложные сценарии содержимого всплывающей подсказки, такие как содержимое всплывающей подсказки HTML или динамическое содержимое всплывающей подсказки, в зависимости от текущего состояния модели представления (ознакомьтесь с документацией API всплывающей подсказки для всех параметров, которые вы можете установить).

Я обновил вашу скрипку, чтобы использовать этот простой bindingHandler по адресу http://jsfiddle.net/rYSH2/11/. Он передает пустые объекты параметров каждой привязке, кроме кнопки "Удалить", в которой указана позиция.

Источник
Другие вопросы по тегам