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

Я пытаюсь получить всплывающие подсказки для некоторого динамического контента, созданного из нокаута. Это простой список с именем и кнопками редактирования/удаления (для которых мне нужна всплывающая подсказка). Он заполняется вызовом 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/

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


knockout.js tooltipster
person akevan    schedule 22.05.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я бы, вероятно, выбрал подход создания bindingHandler для tooltipster. Это очень легко сделать. Вот очень упрощенный 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>

or

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

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

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

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

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

person Robert Westerlund    schedule 22.05.2014
comment
Роберт, большое спасибо за очень подробное объяснение. Мне нужен был пример в контексте моего собственного проекта, чтобы действительно понять функции ko.unwrap/valueAccessor. Ваше здоровье! - person akevan; 23.05.2014
comment
Я добавлю это по какой-то причине, если вы вызовете $(.tooltip).tooltipster(); на $(document).ready() это не сработает. Обнаружил, что после интеграции изменений jsfiddle в мой проект. Просто сделал все мои кнопки связанными, и это исправило это. - person akevan; 23.05.2014