Blijf bij het onderwerp

ReneRubalcava

<\/HEAD>

Voorheen had ik het erover hoe je dojo\/on kunt uitbreiden<\/A> om wat slimme event listener trucs te doen. Deze keer wil ik het hebben over dojo\/topic<\/A>. Je kunt het topic-module zien als een EventBus<\/EM>. Hier is een goede (niet-JavaScript) uitleg van een EventBus als het gaat om Java<\/A>. Het is in feite een singleton of globaal berichtensysteem voor je applicatie.<\/P>

<\/P>

Wat je nu misschien doet<\/STRONG><\/SPAN><\/P>Laten we zeggen dat je bijvoorbeeld twee widgets had die je in je applicatie wilde gebruiken en je wilde informatie tussen die twee doorgeven. Je zou kunnen proberen elke widget in de andere te stoppen en proberen te luisteren naar events, maar dat zou vrij snel slordig worden. Je zou ook gewoon een enkele module kunnen hebben die luistert naar events in elke widget, iets zoals dit.<\/P><\/P>on(widget1, 'load', function() {
  widget2.doSomething();
});
on(widget2, 'load', function() {
  widget1.doSomething();
});<\/PRE><\/P>Dat is niet zo erg, maar als je applicatie moet groeien, zul je merken dat dit na een tijdje gewoon lelijk en moeilijk te debuggen wordt.<\/P><\/P>Wat je zou kunnen doen<\/STRONG><\/SPAN><\/P>Hier komt dojo\/topic om de hoek kijken. Elke widget kan dojo\/topic gebruiken om zich te abonneren op bepaalde berichten. Dit lijkt op events, maar is niet afhankelijk van individuele dijits.<\/P><\/P>topic.subscribe('dijit-message', function(payload) { \/** doe iets **\/' });<\/PRE>Dan kan elk dijit of ander deel van je applicatie naar dat kanaal publiceren.<\/P><\/P>topic.publish('dijit-message', { message: 'hallo' });<\/PRE><\/P>Merk je de subscribe\/publish<\/EM> methoden op? Dat klopt, dojo\/topic<\/EM> is een

pubsub.<\/A><\/STRONG> BOEM!<\/EM><\/P><\/P>Demo<\/STRONG><\/SPAN><\/P>Hier is een heel simpele demo<\/A> van hoe je dit in je applicatie zou kunnen gebruiken.<\/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', 'Klik op mij!');
      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: 'Hallo van dijit1!' });
    }
  });
  
  var Dijit2 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', 'Klik op mij!');
      this.own(on(this.btnNode, 'click', this.onClick.bind(this)),
        topic.subscribe('dijit1-click', function(data) {
        var oldValue = this.btnNode.innerHTML;
 &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; 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.; }.bind(this), 1000);
& nbsp.; & nbsp.; }.bind(this)));
& nbsp.; },
& nbsp.; onClick: function() {
& nbsp.; & nbsp.; topic.publish('dijit2-click', { value: 'Hallo van dijit2!' });
& nbsp.; }
& });
& 
& 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 >< P >< SPAN style = "font-size: 14pt ; " >< STRONG > Zie je het licht? < / STRONG >< / SPAN >< / P >< P > Hopelijk zie je hoe dit een krachtige manier kan zijn om gegevens door te geven tussen je aangepaste widgets in je applicatie. Ik gebruik dit vrij vaak om te beheren welke widgets zichtbaar zijn in een applicatie. Zeg maar, klik op een knop, toon < EM >widget1< / EM >, klik op een andere knop, sluit < EM >widget1< / EM > en open < EM >widget2< / EM >. Ik gebruik het ook om een feature door te geven waar misschien andere widgets van afhankelijk zijn.< / P >< P >< / P >< P > Er zijn veel creatieve manieren waarop je < EM >dojo/topic< / EM > in je applicatie kunt gebruiken. Dit was slechts een korte introductie tot een module die ik dagelijks nuttig vind.< / P >< / BODY >< / HTML >

KyleMorgan

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

Rene, great job as always.