twitter-bootstrap-3 – Typeahead.js在Knockout 3 foreach绑定

我将一个Web应用程序更新为Bootstrap 3和Knockout 3,因此丢失了Bootstrap 2中内置的预先输入.我添加了typeahead.js,除非我在Knockout’foreach’绑定中有一个typeahead,否则它会很好用.我包含了以下工作和失败的代码以及typeahead和Bootstrap绑定的 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绑定的Javascript

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

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

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