【问题标题】:Subscribe to the same event for multiple observables in knockout为淘汰赛中的多个可观察对象订阅同一事件
【发布时间】:2014-04-12 11:09:21
【问题描述】:

我试图通过淘汰来实现以下行为:当用户提交他的登录名和密码并且它是错误的 - 向他显示错误消息。当用户更改任何输入时 - 隐藏消息。

我用计算的 observable 进行了尝试,并明白这不是正确的方法,在阅读文档后我发现了关于 subscribing 的信息。所以当我订阅每个input 时,一切都很好。问题是我将两个 observables 都订阅了同一个事件(因此复制了代码)。我知道我可以将重复的代码放入一个函数中并为每个 observable 订阅该函数,但这对我来说也不是很好。

废话不多说,这是我的fiddle(点击弄错,然后在input 中输入内容),这就是我的做法:

this.loginText.subscribe(function () {
   self.isError(false);
});

this.passwordText.subscribe(function () {
   self.isError(false);
});

我尝试阅读 similar question here,但无法理解我如何将多个 observable 订阅到同一事件。

【问题讨论】:

    标签: knockout.js knockout-3.0


    【解决方案1】:

    你应该使用计算的 observable。当依赖的 observable 发生变化时,每次都会计算计算的 observable。因此,您可以简单地在计算的可观察对象中列出所有可观察对象(绑定到您的输入),并更改其中至少一个调用计算函数。

    function User() {
        var self = this;
            self.loginText      = ko.observable(null);
            self.passwordText   = ko.observable(null);
            self.isError        = ko.observable(false);
    
            self.makeWrong = function(){
                self.isError(true);
            }
    
            ko.computed(function() {
                self.loginText();
                self.passwordText();
                self.isError(false);
            });
        }
    

    Demo

    【讨论】:

      【解决方案2】:

      如果你不想使用 ko.computed 那么你可以使用扩展器。有关扩展器的更多信息http://knockoutjs.com/documentation/extenders.html

      所以对于相同的功能扩展器将是

      ko.extenders.ErrorCheck = function(target, option) {
        target.subscribe(function(newValue) {
          console.log("new Value is " + newValue);
          self.isError(false);
        });
        return target;
      }; 
      

      并且可观察到的是:-

      this.loginText = ko.observable(null).extend({ErrorCheck:""});
      this.passwordText = ko.observable(null).extend({ErrorCheck:""});
      

      Fiddle Demo

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-08-08
        • 1970-01-01
        • 2012-07-07
        • 2017-09-19
        • 2015-01-04
        • 2011-09-17
        • 2015-08-29
        相关资源
        最近更新 更多