Držte se tématu

ReneRubalcava

<\/HEAD>

V minulosti jsem mluvil o tom, jak můžete rozšířit dojo\/on<\/A> a dělat zajímavé triky s posluchači událostí. Tentokrát bych rád mluvil o dojo\/topic<\/A>. Můžete si modul topic představit jako EventBus<\/EM>. Zde je dobré (ne-JavaScriptové) vysvětlení EventBusu v kontextu Javy<\/A>. Je to v podstatě singleton nebo globální systém zasílání zpráv pro vaši aplikaci.<\/P>

<\/P>

Co možná teď děláte<\/STRONG><\/SPAN><\/P>Řekněme například, že máte dva widgety, které chcete použít ve své aplikaci a chcete mezi nimi předávat informace. Můžete zkusit předat každý widget do druhého a poslouchat události, ale to by rychle vedlo k nepořádku. Můžete mít jeden modul, který poslouchá události v každém widgetu podobně jako toto.<\/P><\/P>on(widget1, 'load', function() {
  widget2.doSomething();
});
on(widget2, 'load', function() {
  widget1.doSomething();
});<\/PRE><\/P>Není to tak špatné, ale pokud vaše aplikace poroste, zjistíte, že to může být velmi nevzhledné a obtížné na ladění po nějaké době.<\/P><\/P>Co byste mohli dělat<\/STRONG><\/SPAN><\/P>Tady přichází dojo\/topic. Každý widget může použít dojo\/topic k odběru určitých zpráv. To je podobné událostem, ale nezávislé na jednotlivých dijitech.<\/P><\/P>topic.subscribe('dijit-message', function(payload) { \/** dělat něco **\ });<\/PRE>Pak jakýkoli dijit nebo jiná část vaší aplikace může publikovat na tento kanál.<\/P><\/P>topic.publish('dijit-message', { message: 'hello' });<\/PRE><\/P>Všimněte si metod subscibe\/publish<\/EM>? Přesně tak, dojo\/topic<\/EM> je

pubsub.<\/A><\/STRONG> BOOM!<\/EM><\/P><\/P>Demo<\/STRONG><\/SPAN><\/P>Zde je opravdu jednoduché demo<\/A>, jak byste to mohli použít ve své aplikaci.<\/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', 'Klikni mě!');
      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: 'Ahoj od dijit1!' });
    }
  });
  
  var Dijit2 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', 'Klikni mě!');
      this.own(on(this.btnNode, 'click', this.onClick.bind(this)),
        topic.subscribe('dijit1-click', function(data) {
        var oldValue = this.btnNode.innerHTML;
     &nbsp,& nbsp; this.btnNode.innerHTML = data.value;
&nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,& nbsp,this.btnNode.innerHTML = oldValue;
 , 1000);
}, .bind(this)));
}, onClick: function() {
topic.publish('dijit2-click', { value: 'Ahoj od dijit2!' });
}
});

var d1 = new Dijit1(null, document.getElementById('dijit1'));
var d2 = new Dijit2(null, document.getElementById('dijit2'));

var map = new Map('map', {
center: [-118, 34.5],
zoom: 8,
basemap: 'topo'
});
});<\ /PRE >< P >< \ / P >< SPAN style = " font-size : 14pt ; " >< STRONG > Vidíte světlo ? < \ / STRONG >< \ / SPAN >< \ / P >< P > Doufejme , že vidíte , jak by to mohl být silný způsob předávání dat mezi vašimi vlastními widgety ve vaší aplikaci . Používám to docela často pro správu toho , které widgety jsou viditelné v aplikaci . Řekněme , klikněte na tlačítko , zobrazte < EM >widget1< \ / EM > , klikněte na jiné tlačítko , zavřete < EM >widget1< \ / EM > a otevřete < EM >widget2< \ / EM > . Také to používám k předávání funkce , na které mohou záviset jiné widgety . < \ / P >< P >< \ / P >< P > Existuje mnoho kreativních způsobů , jak byste mohli použít < EM >dojo/topic< \ / EM > ve vaší aplikaci . Toto byl jen rychlý úvod do modulu , který považuji za užitečný denně . < \ / P >< \ / BODY >< \ / HTML >

KyleMorgan

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

Rene, great job as always.