Twitter Bootstrap预先选择未受KnockoutJS约束

Question

好吧,我已经和这个问题争了好几个小时了,把问题缩小到一个非常简单的小提琴

问题是,当我在文本输入上使用twitter bootstrap的typeahead插件并进行选择时,该值不会在KnockoutJS ViewModel中更新.我知道我可以破解它的工作,但必须有一些我在这里缺少的东西.

基本上我所拥有的是:

淘汰赛绑定

// Bind twitter typeahead
ko.bindingHandlers.typeahead = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var $element = $(element);
        var allBindings = allBindingsAccessor();
        var typeaheadArr = ko.utils.unwrapObservable(valueAccessor());

        $element.attr("autocomplete", "off")
                .typeahead({
                    'source': typeaheadArr,
                    'minLength': allBindings.minLength,
                    'items': allBindings.items,
                    'updater': allBindings.updater
                });
    }
};

淘汰ViewModel

function MyModel(){
    var self = this;
    self.productName = ko.observable();
    self.availableProducts = ['One', 'Two', 'Three'];
}

ko.applyBindings(new MyModel());

HTML

<input type="text" data-bind="typeahead:availableProducts, value:productName"/>

其余的东西只是来自Twitter Bootstrap.

Answer 1

一种解决方案是修改您的updater函数，您需要获取value绑定中使用的可观察对象并使用函数参数更新它：

'updater': function(item) {
    allBindings.value(item);
    return item;
}

演示JSFiddle。

如果您不是绑定的作者，则可以使用该updater选项来指定updater函数

data-bind="typeahead:availableProducts, 
           updater: function(item) { productName(item); return item; }"

因为updater应该返回选定的项目，所以它的语法不太好。

演示JSFiddle。