twitter-bootstrap-3 - Typeahead.js 在 Knockout 3 foreach 绑定(bind)中不起作用

Question

我将一个 Web 应用程序更新为 Bootstrap 3 和 Knockout 3，因此丢失了 Bootstrap 2 中的内置预输入。我添加了 typeahead.js，它工作得很好，除非我在 Knockout 'foreach' 绑定(bind)中有预输入。我在下面包含了有效和失败的代码以及用于预先输入和引导绑定(bind)的 Javascript 代码。有任何想法吗？

<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>

用于 typeahead.js 和 Knockout 绑定(bind)的 Javascript

<script>
    $( document ).ready(function() {
        $('input.sections').typeahead({
            name: 'sectionName',
            local: [
                'ABC',
                'DEF'
            ]
        });

        ko.applyBindings({
            section : [
                { name: "", other: "1234" },
                { name: "", other: "5678" }
            ]
        });
    });
</script>

Answer 1

对于像小部件这样的东西，尤其是当您通过模板/控制流呈现元素时，最好的选择是使用自定义绑定(bind)来初始化小部件。例如，您可以使用如下内容:

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

这是一个示例: http://jsfiddle.net/rniemeyer/uuvUR/