- 首页
- 其他开发
- Typeahead.js 在 Knockout 3 foreach 绑定中不起作用
Typeahead.js 在 Knockout 3 foreach 绑定中不起作用
[英] Typeahead.js not working in Knockout 3 foreach binding
本文介绍了Typeahead.js 在 Knockout 3 foreach 绑定中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我将一个 Web 应用程序更新为 Bootstrap 3 和 Knockout 3，因此丢失了 Bootstrap 2 中的内置 typeahead.我添加了 typeahead.js，它工作得很好，除非我在 Knockout 'foreach' 绑定中有一个 typeahead.我在下面包含了有效和失败的代码以及用于预先输入和 Bootstrap 绑定的 Javascript 代码.有什么想法吗?
<div data-bind="foreach: 节"><div class="row"><div class="col-sm-4 form-group"><input type="text" class="form-control sectionNames" data-bind="value: name"/>
</表单>
用于 typeahead.js 和 Knockout 绑定的 JavaScript
解决方案
对于小部件之类的东西，最好的选择是使用自定义绑定来初始化小部件，尤其是当您通过模板/控制流渲染元素时.例如，您可以使用以下内容:
ko.bindingHandlers.typeahead = {初始化:函数(元素，valueAccessor){var 选项 = ko.unwrap(valueAccessor()) ||{}，$el = $(元素),触发器更改 = 函数(){$el.change();}//初始化小部件并确保更新时触发更改事件$el.typeahead(选项).on("typeahead:selected", triggerChange).on("typeahead:autocompleted", triggerChange);//如果 KO 通过模板删除元素，则销毁预先输入ko.utils.domNodeDisposal.addDisposeCallback(元素，函数(){$el.typeahead("销毁");$el = 空；});}};
这是一个示例:http://jsfiddle.net/rniemeyer/uuvUR/
I updated a web app to Bootstrap 3 and Knockout 3 and consequently lost the built in typeahead that was in Bootstrap 2. I added typeahead.js and it works great unless I have a typeahead within a Knockout 'foreach' binding. I included code that works and fails below along with the Javascript code for the typeahead and Bootstrap binding. Any ideas?
<form role="form">
<div class="row">
<div class="col-sm-4 form-group">
<input type="text" class="form-control sectionNames" data-bind="value: name" />
</div>
</div>
<div data-bind="foreach: section">
<div class="row">
<div class="col-sm-4 form-group">
<input type="text" class="form-control sectionNames" data-bind="value: name" />
</div>
</div>
</div>
</form>
Javascript for typeahead.js and Knockout bindings
<script>
$( document ).ready(function() {
$('input.sections').typeahead({
name: 'sectionName',
local: [
'ABC',
'DEF'
]
});
ko.applyBindings({
section : [
{ name: "", other: "1234" },
{ name: "", other: "5678" }
]
});
});
</script>
解决方案
Your best bet for something like a widget, especially when you are rendering elements via templating/control-flow, is to use a custom binding to initialize the widget. For example, you could use something like this:
ko.bindingHandlers.typeahead = {
init: function(element, valueAccessor) {
var options = ko.unwrap(valueAccessor()) || {},
$el = $(element),
triggerChange = function() {
$el.change();
}
//initialize widget and ensure that change event is triggered when updated
$el.typeahead(options)
.on("typeahead:selected", triggerChange)
.on("typeahead:autocompleted", triggerChange);
//if KO removes the element via templating, then destroy the typeahead
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$el.typeahead("destroy");
$el = null;
});
}
};
Here is a sample: http://jsfiddle.net/rniemeyer/uuvUR/
这篇关于Typeahead.js 在 Knockout 3 foreach 绑定中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
