0

我正在同时使用 Knockout 和 Bootstrap。不在剔除模板内的锚标记显示出很好的工具提示效果，但模板内的锚标记却没有。给定模板外部的 html（这有效：一个样式化的工具提示出现在锚点下方）

<a data-original-title="Setup" href="'Setup" class="tip-bottom"><i class="icon-th"></i>Setup</a>

给定一个淘汰赛模板

<tbody data-bind="foreach: {data: providers, afterRender: KoAfterRender}">
  <tr class="">
    <td class="taskOptions">
      <a href="#" class="tip-top" data-original-title="Update"><i class="icon-ok"></i></a>
    </td>
  </tr>
</tbody>

以及我的 ViewModel 中的一个函数

function koAfterRender(element, index, data) {
  $('.taskOptions a').popover();
}
obj.KoAfterRender = koAfterRender;

我希望能够按照本文.popover手动应用该功能，但应用该功能没有效果（也没有错误）。

我怎么了？

谢谢。

编辑：我已经意识到我的代码（以及 Paul Manzotti 添加的自定义绑定代码）实际上都可以工作 - 问题是即使我应用.popover()到模板中的锚点，它仍然没有显示工具提示。

EDIT2：我是个白痴。.popover()是错误的功能。我想.tooltip()

4

2 回答 2

1

我没有使用模板，但是查看它的页面，你不应该像这样使用它：

template: { name: 'person-template', foreach: providers, afterRender: KoAfterRender }

或者，您可以尝试使用自定义绑定来添加弹出框代码。您应该能够将其添加到每个 a 元素

<a data-bind="KoAfterRender: val">

ko.bindingHandlers.KoAfterRender = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        $(element).popover();
    }
};
于 2013-01-17T15:21:07.867 回答
0

因此，要回答我自己的问题：要将引导工具提示应用于 Knockout 模板中的项目，一种解决方案是使用自定义绑定（谢谢 Paul）。

所以给定一个模板：

<tbody data-bind="foreach: {data: providers}">
    <tr class="">
        <td><a data-bind="KoAfterRender:null" href="#" class="tip-top" data-original-title="Update"><i class="icon-ok"></i></a></td>                                    
    </tr>
</tbody>

和自定义绑定：

ko.bindingHandlers.KoAfterRender = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {                                                       
        $(element).tooltip();
    }
};

应显示数据绑定元素上的工具提示。

于 2013-01-17T19:36:51.580 回答