2016-04-17 23 views
0

私の最初のKOプロジェクトには、一般的な機能の基本クラスを「適用」し、テンプレートの保存/キャンセル/リセットボタンと関連イベント処理を提供する子「ボタン」コンポーネントが実装されています。ノックアウトサブ/パブ通知を2回受け取りました

"ボタン"コンポーネントは、クリックイベントを処理して、それを処理する方法を決定するエディタ基本クラスに助言する必要があります。

私はコミュニケーションを処理するためにKOのPub/Sub機能を使いたいと思っていましたが、ノックアウト - ポストボックスプラグインを最初に試しましたが、二重パブリケーションを取得し続けましたので、基本的なpub/。

'クリック'イベントは1回だけ発生し、伝播は停止していますが、通知は2回受信されます。

明記アラートが二回発射されるだろう、なぜ誰もが見ることができる...

を私が何か間違ったことをやっているが、私はそれが何であるかに途方に暮れていますか?

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のイベントに戻って行くことができますが、私は私のツールキットでこれを持っているしたいと思います。

+0

これをフィドルで再現できますか? – janmvtrinidad

+0

あなたのアプリケーションpub/subにこの[plugin](https://github.com/rniemeyer/knockout-postbox)を使用することができます。 – janmvtrinidad

答えて

1

あなたの例からわかるように、特定のチャンネル(たとえば「保存」)を公開して購読したいと思うようです。

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をよく見ると、基本が不足しているようです。

+0

ありがとうございました。作業中のフィドルのために、それはpostboxプラグインで動作します。ただのメモ - 私のコードはpostboxプラグインのコードのようには見えません。変数 'postbox'は単純なko.subscribableであり、コードはここで説明されているようにKOのネイティブpub/sub facility/without /プラグインを実装する私の試みです:http://www.knockmeout.net/2012/05/using- ko-native-pubsub.html - それはすべて私がそれを働かせたと言って、そしてポインタを感謝します:-) – Serexx

関連する問題