使 Knockout.JS 订阅全球可用

Question

我有一个 ASP.NET 应用程序，我正在使用 Knockout JS 在我的应用程序中执行一些最小的任务。但是我有一些 EditorTemplates 正在计算要显示的值。我想从其他一些 EditorTemplates 访问这些值。我想我可能会在 Knockout 中使用本机 pub/sub 功能，这意味着我会在一个 EditorTemplate 中编写通知代码，如下所示：

new ko.subscribable().notifySubscribers(this.calculatedValue, "customTopic");

然后在我的其他 EditorTemplate 中更改时接收此值

new ko.subscribable().subscribe(function (newValue) {
        alert(newValue);            
    }, this, "customTopic");

当然，这段代码不起作用，因为我每次都在创建一个new ko.subscribable()。

如何创建一个在我的所有视图中都可用的ko.subscribable？

Answer 1

• 首先，您需要在全局范围内定义subscribable 变量的新实例。
• 在其他子视图模型subscribe 中到您定义的可订阅变量。
• 在发生任何更新时使用notifySubscribers 通知任何订阅者。

例如：https://jsfiddle.net/kyr6w2x3/149/

查看：

 <div id="one">
    <h1>MainVM:</h1>
    <input type="text" data-bind="textInput:Name">
    <hr>
  </div>

  //-------------------------------------------------
  <div id="two">
    <h1>SecondVM:</h1>
    <div data-bind="text:NameSecondVM"> </div>
  </div>

型号：

 var shouterValueOfName = new ko.subscribable();

<script type="text/javascript">
  var MainViewModel = function(){
    var self = this;
     self.Name = ko.observable();
     self.Name.subscribe(function (newValue) {
        newValue = newValue ? newValue + " Sent from MainVM" : "" ;
        shouterValueOfName.notifySubscribers(newValue, "secondVMTakeThis");
    }, self);
  }        
</script>

<script type="text/javascript">
  var SecondViewModel = function(){
     var self = this;
     self.SecondVM = ko.observable();
     self.NameSecondVM = ko.observable();
     shouterValueOfName.subscribe(function (newValue) {
       self.NameSecondVM(newValue);
     }, this, "secondVMTakeThis");
  }
</script>
var viewModelA = new MainViewModel();
var viewModelB = new SecondViewModel();
ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));