Question

我正在使用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;

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

我出错了什么？

感谢。

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

编辑2：我是个白痴。 .popover()是错误的功能。我想要.tooltip()

Answer 1

我没有使用模板，但查看page，我不应该像这样使用它：

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

或者，您可以尝试使用custom binding添加弹出代码。您应该能够将它添加到每个元素

<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();
    }
};

Answer 2

所以，回答我自己的问题：要将Bootstrap tooltip应用于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();
    }
};

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

将Bootstrap Javascript函数应用于Knockout模板中的项目

2 个答案: