twitter-bootstrap – Twitter Bootstrap预先选择未受KnockoutJS

发布时间：2020-12-18 00:22:44 所属栏目：安全来源：网络整理

导读：好吧,我已经和这个问题打了几个小时了,并把问题缩小到一个非常简单的 Fiddle 问题是,当我在文本输入上使用twitter bootstrap的typeahead插件并进行选择时,该值不会在KnockoutJS ViewModel中更新.我知道我可以破解它的工作,但必须有一些我在这里缺少的东西.

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

问题是,当我在文本输入上使用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.

解决方法

一种解决方案是修改updater函数,您需要获取值绑定中使用的observable并使用函数参数更新它：

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

演示JSFiddle.

如果您不是绑定的作者,则可以使用updater选项指定更新程序功能

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

因为更新程序应返回所选项目,所以这种语法不太好.

演示JSFiddle.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!