Tooltipster 不适用于 Knockout 动态元素答案

【问题标题】：Tooltipster not applied to Knockout dynamic elementsTooltipster 不适用于 Knockout 动态元素
【发布时间】：2014-05-22 02:38:33
【问题描述】：

我正在尝试获取关于淘汰赛生成的一些动态内容的 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/

我错过了什么？

【问题讨论】：

标签： knockout.js tooltipster

【解决方案1】：

我可能会采用为工具提示创建bindingHandler 的方法。这样做很容易。这是一个非常简单的 bindingHandler，如果您愿意，它可以让您为每个元素的 tooltipster 插件提供选项（但是，如果选项更改，即使它们是可观察的，bindingHandler 也不会更新，但如果您愿意，请查看 the documentation on creating custom bindings创建绑定）：

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>

或者，如果您的绑定视图模型有一个名为 tooltip 的属性（使用更好的 bindingHandler 编写，如果 tooltip 属性是可观察的并且发生更改，则工具提示可能会更改）：

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

这将避免必须按类名查找元素，它会避免多次在同一个元素上调用插件，并且它允许您将唯一（或相同）选项传递给每个工具提示，如果你愿意的话。例如，它还允许您指定 content 选项，以允许工具提示内容的更高级场景，例如 HTML 工具提示内容或动态工具提示内容，具体取决于视图模型的当前状态（查看 @ 987654323@ 了解您可以设置的所有选项）。

我已更新您的小提琴以使用 http://jsfiddle.net/rYSH2/11/ 的简单 bindingHandler。它将空选项对象传递给每个绑定，但“删除”按钮除外，该按钮具有指定的位置。

【讨论】：

罗伯特，非常感谢您提供非常详细的解释。我需要在我自己的项目上下文中的示例来真正理解 ko.unwrap / valueAccessor 函数。干杯！
如果你调用 $(".tooltip").tooltipster();在 $(document).ready() 上它不起作用。发现将jsfiddle更改集成到我的项目中后。刚刚把我所有的按钮都绑定了，然后就解决了。