两次获得淘汰子/酒吧通知

时间:2016-04-17 19:05:50

标签: knockout.js publish-subscribe

我的第一个KO项目有一个编辑器组件"应用" s是一个基本类,用于实现常用功能并实现一个孩子"按钮"用于提供模板化保存/取消/重置按钮和相关事件处理的组件。

"按钮"组件需要处理单击事件并建议编辑器基类,然后决定如何处理它。

我想使用KO的Pub / Sub功能来处理通信,并首先尝试了knockout-postbox插件,但仍然获得了双重发布,所以我将其减少到基本的pub / sub设置,无济于事。

点击'事件仅触发一次,并且它的传播已停止,但通知会被收到两次。

显然我做错了什么,但我不知道它是什么......

有谁可以看到为什么注意到的警报会被解雇两次?

App.js

 var appViewModel = function () {
    var self = this;
    self.postbox = new ko.subscribable();
    return new appViewModel();
 })

Buttons.html

<div class="nav btn-group editButtons">
    <button class="btn btn-default" data-bind="click:reset">Reset</button>
    <button class="btn btn-warning" data-bind="click:cancel">Cancel</button>
    <button class="btn btn-primary" data-bind="click:save">Save</button>
</div>

Buttons.js

define(['App/app','jquery', 'knockout', 'text!./editorButtons.html', 'strings'], function (app,$, ko, htmlString) {

  function EditorButtons(params) {
     var self = this;
     var clickTopic = "{0}EditorButtonClicked".format(params.namespace);

     // **** THIS FIRES ONCE *****
     self.save = function (me, e) {

        e.preventDefault();
        e.stopImmediatePropagation();
        app.postbox.notifySubscribers("save", clickTopic);
        return false;
     }
  }
  return { viewModel: EditorButtons, template: htmlString };
 });

EditorBaseClass

define(['knockout', 'jquery', 'App/app', 'strings'], function (ko, $, app) {

    EditorBaseClass = function (parent, item, mode, namespace) {
        var self = this;
        self.mode = ko.observable(mode);
        var clickTopic = "{0}EditorButtonClicked".format(namespace);


        // **** This Alert fires Twice *****/
        app.postbox.subscribe(function (clickType) {

            alert(clickType);

        }, self, clickTopic);
    }
});

家长编辑

define(['jquery', 'knockout', 'App/app', 'text!./myEditor.html', 'models/EditorBaseClass'], function ($, ko, app, htmlString, editor) {

    function MyEditor(params) {
        var self = this;
        EditorBaseClass.apply(self, [self, params.item, params.mode, "myNamespace"]);
    }
    return { viewModel: MyEditor, template: htmlString };
});

感谢您发现的任何事情 - 我可以回到JQuery活动,但我想在我的工具包中使用它。

1 个答案:

答案 0 :(得分:1)

从我的例子中我理解,您似乎想要发布和订阅某个频道(例如&#34; save&#34;)。话虽这么说,我会改变以下内容:

 self.save = function (me, e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    // you should use ko.postbox to publish to a channel
    ko.postbox.publish("save", clickTopic);
    return false;
 }

// also also use ko.postbox to subscribe to a channel
ko.postbox.subscribe("save", function (clickType) {
    alert(clickType);
});

可以看到一个完整的例子here。我已经尝试保留原始代码,以便您更容易接听。

P.S。我认为你最好仔细看看knockout-postbox documentation,因为你似乎错过了基础知识。