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

标签 jquery knockout.js twitter-bootstrap templating

我有一个在 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 之后,但这也不起作用。

最佳答案

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

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

关于jquery - KnockoutJS 模板和 Twitter Bootstrap/JQuery 工具提示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9957564/

相关文章:

javascript - 选项卡内容覆盖选项卡

javascript - AJAX 调用返回 json 数组未定义

javascript - 数据绑定(bind)不适用于 View 模型

javascript - 检查输入值是否不相同 onBlur

ajax - IOS6 和 Safari 照片上传 - 文件 API + Canvas + jQuery Ajax 异步上传和调整文件大小

javascript - knockout.js、knockout-sortable 和默认文本

templates - 在 Knockout.js 中使用 foreach 绑定(bind)而不更改上下文

css - 响应式网站布局入门

css - 为什么 Bootstrap 主题没有在 nodejs 上使用 https 模块上传?

javascript - 无法清除 bootstrap datepicker input-daterange 中的日期范围