Question

我正在练习使用knockout.js连接jQuery自动完成。我正在尝试构建的应用程序是一个简单的待办事项任务列表。我的任务对象具有desc，name和id等属性。它有一个方法setUser()，用于设置任务的名称和名称。 id（基本上将任务分配给某人。

我用这种方式编写了自定义绑定：

ko.bindingHandlers.autocomplete = {
    init: function (el, valueAccessor) {
        var va = valueAccessor();
        var lbl = va.label;
        var val = va.value;
        $(el).autocomplete({
            source: src,
            select: function (evt, ui) {
                evt.preventDefault();
                lbl(ui.item.label);
                val(ui.item.value);
                $(el).val(ui.item.label);
            }
        });
    }
};

data-bind语法编写如下：

<input type="text" data-bind="autocomplete : {label: name, value: id}"/>

所有这些都可以很好地完美地连接自动完成。但是，在您更改模型中某些内容的场景中，您自然希望关联的文本框能够反映更新的结果。

这里的简单解决方案是添加值绑定：

<input type="text" 
    data-bind="autocomplete : {label: name, value: id}, value: name"/>

但是如果没有value绑定，你怎么做？！

jsbin link：http://jsbin.com/InUHIwE/3/

Answer 1

您只需subscribe即可获得所需的观察结果。

因此，我将重新编写自定义绑定，如下所示：

ko.bindingHandlers.autocomplete = {
    init: function (el, valueAccessor) {
        console.log('init');
        var va = valueAccessor();
        var lbl = va.label;
        var val = va.value;
        lbl.subscribe(function (v) {
            $(el).val(v);
        });
        console.log('valueaccessor:', va);
        $(el).autocomplete({
            source: src,
            select: function (evt, ui) {
                evt.preventDefault();
                lbl(ui.item.label);
                val(ui.item.value);
                $(el).val(ui.item.label);
            }
        });
    }
};

jsbin link：http://jsbin.com/InUHIwE/4/

在使用knockout自定义绑定时模型更新时更新元素

1 个答案: