トピックに集中する

ReneRubalcava

<\/HEAD>

以前、dojo\/on を拡張して 便利なイベントリスナートリックを行う方法について話しました。今回は dojo\/topic について話したいと思います。topic モジュールは EventBus<\/EM> と考えることができます。こちらは Java における EventBus の良い（非 JavaScript）説明 です。基本的にはアプリケーションのためのシングルトンまたはグローバルメッセージングシステムです。<\/P><\/P>現在あなたがしているかもしれないこと<\/STRONG><\/SPAN><\/P>例えば、アプリケーションで使いたい2つのウィジェットがあり、それらの間で情報を渡したいとします。お互いにウィジェットを渡してイベントをリッスンしようとすることもできますが、それはすぐに乱雑になってしまいます。単一のモジュールが各ウィジェットのイベントをリッスンするだけでも、次のような感じになります。<\/P><\/P>on(widget1, 'load', function() {
  widget2.doSomething();
});
on(widget2, 'load', function() {
  widget1.doSomething();
});<\/PRE><\/P>これはそれほど悪くありませんが、アプリケーションが成長すると、これが単純に醜くなり、デバッグが難しくなることに気づくでしょう。<\/P><\/P>あなたができること<\/STRONG><\/SPAN><\/P>ここで dojo\/topic の出番です。各ウィジェットは dojo\/topic を使って特定のメッセージを購読できます。これはイベントに似ていますが、個々の dijit に依存しません。<\/P><\/P>topic.subscribe('dijit-message', function(payload) { \/** 何かをする **\/' });<\/PRE>そして、任意の dijit やアプリケーションの他の部分がそのチャンネルに公開できます。<\/P><\/P>topic.publish('dijit-message', { message: 'hello' });<\/PRE><\/P> subscribe\/publish<\/EM> メソッドに気づきましたか？そうです、dojo\/topic<\/EM> は pubsub.<\/A><\/STRONG> ボーン！<\/EM><\/P><\/P>デモ<\/STRONG><\/SPAN><\/P>こちらはあなたのアプリケーションでこれをどのように使うかの非常にシンプルなデモ<\/A>です。<\/P>

require([
  'esri\/map',
  'dojo\/_base\/_declare',
  'dojo/on',
  'dojo/topic',
  'put-selector',
  'dijit\/_WidgetBase',
  'dojo/domReady!'
], function(Map, declare, on, topic, put, _WidgetBase) {
  
  var Dijit1 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', 'クリックしてください！');
      this.own(on(this.btnNode, 'click', this.onClick.bind(this)),
        topic.subscribe('dijit2-click', function(data) {
        var oldValue = this.btnNode.innerHTML;
        this.btnNode.innerHTML = data.value;
        setTimeout(function() {
          this.btnNode.innerHTML = oldValue;
        }.bind(this), 1000);
      }.bind(this)));
    },
    onClick: function() {
      topic.publish('dijit1-click', { value: 'dijit1からこんにちは！' });
    }
  });
  
  var Dijit2 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', 'クリックしてください！');
      this.own(on(this.btnNode, 'click', this.onClick.bind(this)),
        topic.subscribe('dijit1-click', function(data) {
        var oldValue = this.btnNode.innerHTML;
        this.btnNode.innerHTML = data.value;
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.setTimeout(function() {
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.this.btnNode.innerHTML = oldValue;
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp;.bind(this), 1000);
&nbsp.& nbsp.& nbsp.; }.bind(this)));
 . },
& nbsp;. onClick: function() {
& nbsp;. & nbsp;. topic.publish('dijit2-click', { value: 'dijit2からこんにちは！' });
& nbsp;. }
& nbsp;. });
& nbsp;. 
& nbsp;. var d1 = new Dijit1(null, document.getElementById('dijit1'));
& nbsp;. var d2 = new Dijit2(null, document.getElementById('dijit2'));
& nbsp;. 
& nbsp;. var map = new Map('map', {
& nbsp;. & nbsp;. center: [-118, 34.5],
& nbsp;. & nbsp;. zoom: 8,
& nbsp;. & nbsp;. basemap: 'topo'
& nbsp;. });
});< /PRE >< P >< / P >< P >< SPAN style = "font-size: 14pt ; " >< STRONG > 光は見えますか？ < / STRONG >< / SPAN >< / P >< P > おそらく、これはカスタムウィジェット間でデータを渡す強力な方法であることがわかるでしょう。私はこれをアプリケーション内で表示されるウィジェットを管理するためによく使います。例えば、ボタンをクリックして widget1 < / EM > を表示し、別のボタンをクリックして widget1 < / EM > を閉じて widget2 < / EM > を開くなどです。また、他のウィジェットが依存する可能性のあるフィーチャーを渡すためにも使用します。 < / P >< P >< / P >< P > あなたのアプリケーションで dojo/topic < / EM > を使う創造的な方法はたくさんあります。これは私が日常的に役立てているモジュールへの簡単なイントロダクションでした。 < / P >< / BODY >< / HTML >

KyleMorgan

Fantastic write-up that's easy to follow along. 

Rene, great job as always.