jquery - KnockoutJS 模板和 Twitter Bootstrap/JQuery 工具提示不起作用

Question

我有一个在 onload 中加载 Twitter Bootstrap 工具提示和弹出窗口的代码片段，如下所示:

$('i[rel=tooltip]').tooltip({
    placement: "left"
});

这适用于静态 HTML，直到我添加 KnockoutJS 模板(为简洁起见，省略了一些代码):

<div class="row-fluid" data-bind="foreach: events.slice(paginationStart, paginationStop())">
    ...
    <li>
        <i class="icon-calendar" rel="tooltip" data-original-title="Date"></i> <span data-bind="text: start">event.date</span>
    </li>
    ...
</div>

然后工具提示根本不会显示。我尝试过匿名和普通 KnockoutJS 模板

我想我明白发生了什么:KnockoutJS 模板正在覆盖 Twitter Bootstrap 初始化，因为模板是在导入 Twitter Bootstrap JS 文件后加载运行的。但我不知道该怎么办。我确实尝试将 JQuery 内容放在 ko.applyBindings 之后，但这也不起作用。

Answer 1

写完这个问题后我很快就想通了，不敢相信我错过了。答案是在 KnockoutJS 模板的 afterRender 回调中执行 Twitter Bootstrap Javascript 插件/JQuery 操作。

示例:将属性更改为 data-bind="template: { foreach: data, afterRender: bootstrapDecorate }" 并使 bootstrapDecorate 成为您运行任何初始化设置的 knockout 模型中的可调用函数你之前在 body.onload 函数中有过。