Question

我使用materializecss和knockoutjs来创建一些表单。它工作正常。当我从ui设置值时，淘汰视图模型会按预期更新。

然而，反过来却没有按预期工作。从knockout更新值不起作用。检查github上的来源后，我只能提出下面的代码。

ko.bindingHandlers.materialSelect = {
    init(element, valueAccessor, allBindings, viewModel, bindingContext){
        $(element).material_select();
    },
    update(element, valueAccessor, allBindings, viewModel, bindingContext){
        var value = ko.unwrap(valueAccessor());
        if (value){
            var items = $(element).children('option').map(function(x,y){ return $(y).attr('value')}).toArray();
            var index = _.indexOf(items,value);
            if (index!=-1){
                var li = $(element).siblings('ul').children('li').eq(index);
                li.click();
            }
        }
    }
};

它有效，但我不喜欢它。有更好的方法吗？

这是html

<div class="input-field col s12">
    <select id="item1" class="validate"
        data-bind="optionsText: 'name', optionsValue: 'id',options: store.item1.data, value: model.gender, optionsCaption: 'Select one...', optionsAfterRender: store.item1.setup, materialSelect" >
    </select>
    <label>Gender</label>
</div>

该模型是一个普通的javascript对象，其上调用了ko.track。例如

var model = ko.track({ gender: undefined });

从KnockoutJs ViewModel更新MatrializeCss选择值

0 个答案: