Question

我试图获取针对某些动态内容的工具提示工具提示。它是一个简单的列表，有一个名称和编辑/删除按钮（我想要工具提示）。它是通过致电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/

我错过了什么？

Answer 1

我可能会采用为工具提示器创建bindingHandler的方法。这样做很容易。这里是一个非常简单的bindingHandler，它允许你为每个元素的工具提示插件提供选项，但是，如果选项发生变化，即使它们是可观察的，bindHandler也不会更新，但请查看{{3如果你想创建一个绑定）：

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工具提示内容或动态工具提示内容，具体取决于视图模型的当前状态（看一看）在the documentation on creating custom bindings处可以设置所有选项。

我更新了你的小提琴，在the tooltipster API documentation使用那个简单的bindingHandler。它将空选项对象传递给每个绑定，除了＆＃34;删除＆＃34;按钮，其位置已指定。

Tooltipster未应用于Knockout动态元素

1 个答案: