twitter-bootstrap - Twitter Bootstrap 预输入选择不受 KnockoutJS 的约束

Question

好的，我已经与这个问题斗争了几个小时，并将问题缩小到一个非常简单的 Fiddle

问题是，当我在文本输入上使用 twitter bootstrap 的 typeahead 插件并进行选择时，KnockoutJS ViewModel 中的值不会更新。我知道我可以破解它来工作，但一定有一些我在这里遗漏的东西。

基本上我所拥有的是:

knockout 绑定(bind)

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

knockout 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 中使用的 observable 的函数使用函数参数绑定(bind)和更新它:

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

演示 JSFiddle.

如果您不是绑定(bind)的作者，则可以使用 updater指定 updater 的选项功能

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

因为 updater应该返回选定的项目 this 的语法不是很好。

演示 JSFiddle.