2

我正在尝试获取关于淘汰赛生成的一些动态内容的工具提示工具提示。这是一个简单的列表，有一个名称和编辑/删除按钮（我想要工具提示）。它是通过调用 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/

我错过了什么？

4

1 回答 1

4

我可能会采用为 tooltipster创建bindingHandler的方法。这样做很容易。这是一个非常简单的 bindingHandler，如果您愿意，它可以让您为每个元素的 tooltipster 插件提供选项（但是，如果选项更改，即使它们是可观察的，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>

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

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

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

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

于 2014-05-22T05:42:01.823 回答