knockout.js - 在 knockout 中选择后无法清除自动完成值

Question

我在我的一个项目中使用了 knockout-jqautocomplete 插件。每当我在自动完成中选择一个值时，我都会检查我维护的另一个数组是否已经具有该值。如果是，我什么都不做，否则我将选定的值添加到数组中。单击/选择值后，所选值将填充到自动完成文本框中。但我不希望这种情况发生。

一旦我点击它，我只需要它调用所需的函数来检查它是否已经存在并清除自动完成值。但出于某种原因，我无法清除自动完成值。

请在下面找到 jsfiddle 链接。

http://jsfiddle.net/kumarr/qy0dkbdp/2/

非常感谢任何帮助

var ViewModel = function() {
var self = this;
this.templateValue = ko.observable();

this.remoteData = ko.observableArray([{
        id: 1,
        name: "one",
        description: "one description"
    },
    {
        id: 2,
        name: "two",
        description: "two description"
    },
    {
        id: 3,
        name: "three",
        description: "three description"
    }]);


this.ownerList = ko.observableArray([]);






this.addOwners = function (owner) {
    var exists = false;


        for (var o in self.ownerList()) {
            var temp = self.ownerList()[o];
            if (temp.id === owner.id) {
                exists = true;
            }
        }

        if (exists === false) {
            self.ownerList.push({
                "id": owner.id,
                "name": owner.name
            });
        }
        self.templateValue('');        


}

};


ko.applyBindings(new ViewModel());

我的html

<input data-bind="jqAuto: { source: remoteData, value: templateValue, inputProp: 'name', template: 'itemTmpl'  }" />

<div data-bind="foreach:ownerList">
  <div data-bind="text:name">
  </div>
</div>


<script id="itemTmpl" type="text/html">
  <a>
    <strong data-bind="text: id,click:$root.addOwners"></strong>
    <em data-bind="text: name,click:$root.addOwners"></em>
  </a>
</script>

Answer 1

与其在模板中添加 click 绑定(bind)，我认为在这种情况下更适合您的方法是订阅 templateValue observable。每当它更新时，您都可以运行您的逻辑，推送到您的 observableArray，如有必要，最后清除该值。

您可以像这样设置订阅:

this.templateValue.subscribe(this.addOwners);

这是你的 fiddle 的一个稍微修改的版本:http://jsfiddle.net/rniemeyer/brpd63r8/