Twitter bootstrap 将引导Javascript函数应用于淘汰模板中的项
我同时使用击倒和引导。不在淘汰模板中的锚定标记会显示良好的工具提示效果,但模板中的锚定标记不会。 给定模板外的html(这是有效的:一个样式化的工具提示出现在锚点下方) 我希望能够按照手动应用Twitter bootstrap 将引导Javascript函数应用于淘汰模板中的项,twitter-bootstrap,knockout.js,Twitter Bootstrap,Knockout.js,我同时使用击倒和引导。不在淘汰模板中的锚定标记会显示良好的工具提示效果,但模板中的锚定标记不会。 给定模板外的html(这是有效的:一个样式化的工具提示出现在锚点下方) 我希望能够按照手动应用.popover函数,但应用该函数没有效果(也没有错误) 我做错了什么 谢谢 编辑:我意识到我的代码(以及Paul Manzotti帮助添加的自定义绑定代码)实际上都能工作-问题是,即使我将.popover()应用于模板中的锚,它仍然不会显示工具提示 我是个白痴.popover()是错误的函数。我想要.to
.popover
函数,但应用该函数没有效果(也没有错误)
我做错了什么
谢谢
编辑:我意识到我的代码(以及Paul Manzotti帮助添加的自定义绑定代码)实际上都能工作-问题是,即使我将.popover()
应用于模板中的锚,它仍然不会显示工具提示
我是个白痴
.popover()
是错误的函数。我想要.tooltip()
我没有使用过模板,但是在查看模板时,您是否应该这样使用它:
template: { name: 'person-template', foreach: providers, afterRender: KoAfterRender }
或者,您可以尝试使用添加popover代码。您应该能够将其添加到每个元素中
<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();
}
};
ko.bindingHandlers.KoAfterRender={
init:function(元素、valueAccessor、allBindingsAccessor、viewModel、bindingContext){
//当绑定首次应用于元素时,将调用此函数
//在此处设置任何初始状态、事件处理程序等
$(element.popover();
}
};
所以,要回答我自己的问题:要将a应用于淘汰模板中的项目,一个解决方案是使用自定义绑定(谢谢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>
应显示数据绑定元素上的工具提示。+1用于自定义绑定-这是一个更好的解决方案,谢谢。
template: { name: 'person-template', foreach: providers, afterRender: KoAfterRender }
<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();
}
};
<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();
}
};