Knockout JS：函数调用两次

Question

我添加了一个文本框，我想在每个 keyup 函数被调用时都这样做。

这是我的 html 代码：

<input type="text" id="description" class="form-control" maxlength="255" data-bind="event:{keyup: doSomething},value: property1,valueUpdate:'afterkeyup'"></input>

这是我的knockout js代码：

define(['uiComponent','ko'], function(Component,ko) {
         return Component.extend({
            defaults:{
                property1: ko.observable(),
                tracks: {
                        property1: true
                  }
            },
            initialize: function () {
                this._super();
            },
            getText: function () {
                return "call the function here..";
            },
            doSomething : function(){
                this.property1.subscribe(function(newValue){
                    console.log(newValue);
                    console.log("inside subscribe");
                });
            }
        });
});

例如：当我按T时，它会调用一次。之后，我按 E 然后它会调用两次而不是一次。

我想在每个 keyup 我想获取文本框值时都这样做。

怎么做？

Answer 1

终于，我得到了我的解决方案：

我确实喜欢这样一种可能的解决方法，即在调用订阅时存储返回的 subscription 对象，如果已经存储了 subscription存在 在再次订阅之前处理它。

define(['uiComponent','ko'], function(Component,ko) {
         return Component.extend({
            defaults:{
                property1: ko.observable(),
                subscription : null,
                tracks: {
                        property1: true
                  }
            },
            initialize: function () {
                this._super();
            },
            getText: function () {
                return "call the function here..";
            },
            doSomething : function(){
                if (this.subscription)
                    this.subscription.dispose();

                this.subscription = this.property1.subscribe(function(newValue){
                    console.log(newValue);
                    console.log("inside subscribe");
                });
            }
        });
});

Answer 2

这有点像 "anti pattern" 有两种方式绑定和订阅事件。

在 initialzie 中，创建对您的可观察对象的订阅一次：

initialize: function() {
  /* ... */
  this.property1.subscribe(function(newValue) { /* ... */ });
}

如果您打算稍后删除该组件，您可以存储订阅并在删除时处理它。（与您目前在每个活动中所做的类似。）

现在，每当 keyup 发生时，knockout 从输入中读取 value，将其写入 property1，然后调用订阅的函数。

Knockout JS：函数调用两次

Knockout JS : Function call twice time

javascript

events

event-handling

dom-events

knockout.js