KnockoutJS 和 PubSub 更新视图之间的可观察数组

Question

我有两个 modalviews - MyModalViewA (parent) 和 MyModalViewB (child).

MyModalViewA 作为自定义绑定生成 MyModalViewB，还有我需要更新的可观察数组。它看起来像：

(function () {

            'use strict';

            var
                window = __webpack_require__(/*! window */ 10),
                _ = __webpack_require__(/*! _ */ 2),
                $ = __webpack_require__(/*! $ */ 12),
                ko = __webpack_require__(/*! ko */ 3),
                key = __webpack_require__(/*! key */ 16),

                Enums = __webpack_require__(/*! Common/Enums */ 4),
                Utils = __webpack_require__(/*! Common/Utils */ 1),

                Links = __webpack_require__(/*! Common/Links */ 13),
                Remote = __webpack_require__(/*! Remote/User/Ajax */ 14),

                kn = __webpack_require__(/*! Knoin/Knoin */ 5),
                AbstractView = __webpack_require__(/*! Knoin/AbstractView */ 11),
                AttachmentModel = __webpack_require__(/*! Model/Attachment */ 86)
            ;

    function MyModalViewA()
    {
       ...some observables...
       //data response which must be updated
       this.rows= ko.observableArray([]);

       this.getResults = Utils.createCommand(this, function() 
       {
         kn.showScreenPopup(__webpack_require__(/*! View/Popup/SearchUsers */ 171),[oData]);
       }
    }

 kn.constructorEnd(this);
}

module.exports = MyModelViewA;

}());

然后MyModelViewB:

(function () {

            'use strict';

            var
                window = __webpack_require__(/*! window */ 10),
                _ = __webpack_require__(/*! _ */ 2),
                $ = __webpack_require__(/*! $ */ 12),
                ko = __webpack_require__(/*! ko */ 3),
                key = __webpack_require__(/*! key */ 16),

                Enums = __webpack_require__(/*! Common/Enums */ 4),
                Utils = __webpack_require__(/*! Common/Utils */ 1),

                Links = __webpack_require__(/*! Common/Links */ 13),
                Remote = __webpack_require__(/*! Remote/User/Ajax */ 14),

                kn = __webpack_require__(/*! Knoin/Knoin */ 5),
                AbstractView = __webpack_require__(/*! Knoin/AbstractView */ 11),
                AttachmentModel = __webpack_require__(/*! Model/Attachment */ 86)
  ;

        function MyModalViewB()
        {
           ...some observables...

        this.doSearch = Utils.createCommand(this, function() 
        {
           MyModelViewB.findUsers(userId);
        }

        kn.constructorEnd(this);
        }

        MyModelViewB.findUsers = function (userId)
        {
             //here I'm retriewing rows 
             //and I need I need to update rows from MyModalViewA
        }


    module.exports = MyModelViewB;

    }());

然后根据 Whats the best way of linking/synchronising view models in Knockout? 的回答，我尝试使用 PubSub 从 MyModelViewA 更新 this.rows= ko.observableArray([]);。

为此，我将 var postbox = ko.observable(); 添加到 MyModelViewA 构造函数变量。然后在 MyModelViewA 我添加了

   postbox.subscribe(function(newValue) {
        this.rows.push(newValue);
    }, this);

然后在 MyModelViewB 我添加了

this.results = ko.observableArray([]);
this.results.subscribe(function(newValue) {
    postbox.notifySubscribers(newValue);
});

但是两个视图都没有得到什么 newValue 既不是 MyModelViewB 也没有更新 MyModelViewA this.rows 当我硬编码 newValue 在 MyModelViewB.

那时我不确定我是否从上面提到的 link 得到了正确的答案来让它工作。

编辑

我已经在我的模块包代码顶部添加了

var postbox = new ko.subscribable();

如下代码

(function($) { $(function() {
    window.postbox = new ko.subscribable();
    });
});

在尝试声明可订阅时抛出错误

Cannot read property 'subscribe' of undefined

然后在 MyModalViewA 的模块中添加了来自 PFX 答案的简化版本：

    postbox.subscribe(function(newValue) {
            self.myTest(newValue);

            console.log('New value: ' + newValue);
        }, null, "NewRowAvailable"
    );

并在 MyModelViewB.findUsers 下 MyModalViewB 的模块中添加了

var newRow = "testing123";
postbox.notifySubscribers(newRow, "NewRowAvailable");

当我调试该代码时，它显示 postbox 被定义为 Object {NewValueAvailable: } 但 notifySubscribers 没有更新可订阅。

想法？

Answer 1

确保 postbox 实例是在两个视图模型之间共享的同一个实例，并且 notifySubscribers 和 subcribe 方法遵循以下签名。

notifySubscribers(eventData, eventName); 

subscribe(function(eventData) { ... }, null, eventName);

下面是您要实现的目标的简化版本。
这里只传递了 1 个搜索结果，但也可能通过 eg 传递更多。一个数组。

var postbox = ko.observable();

function MyModalViewA()
{
    var _self = this;
    _self.rows = ko.observableArray([
        { label: "foo" },
        { label: "bar" }    
        ]);
    
    postbox.subscribe(function(newValue) {         
          _self.rows.push(newValue);
      }, null, "PFX.NewRowAvailable"
      );
};

function MyModalViewB()
{
    var _self = this;
    
    _self.search = function() {
    
        var newRow = { "label" : "baz" };
        postbox.notifySubscribers(newRow, "PFX.NewRowAvailable");      
    };
};

var vma = new MyModalViewA();
ko.applyBindings(vma, $("#vma").get(0));

var vmb = new MyModalViewB();
ko.applyBindings(vmb, $("#vmb").get(0));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div id="vma">
    <h3>ViewModel A</h3>
    <ol data-bind="foreach: rows">
        <li data-bind="text: label"></li>
    </ol>
</div>

<hr />

<div id="vmb">    
    <h3>ViewModel B</h3>
    <button data-bind="click: search">search</button>
</div>

KnockoutJS 和 PubSub 更新视图之间的可观察数组

KnockoutJS and PubSub to update observable array between views

javascript

arrays

model-view

observable

knockout.js