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

updating element back when model updates while using knockout custom binding

本文关键字：更新 定时 模型 元素 绑定 自定义      更新时间：2023-09-26

我正在做一个带有 KNOCKOUT 的 jQuery 自动完成.js的练习。我正在尝试构建的应用程序是一个简单的待办事项列表。我的任务对象具有 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链接：http://jsbin.com/InUHIwE/3/

您只需要订阅所需的可观察量。

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

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链接：http://jsbin.com/InUHIwE/4/

相关文章：