Mantente en el tema

ReneRubalcava

<\/HEAD>

Anteriormente había hablado sobre cómo puedes extender dojo\/on<\/A> para hacer algunos trucos interesantes con escuchas de eventos. Esta vez, me gustaría hablar sobre dojo\/topic<\/A>. Puedes pensar en el módulo topic como un EventBus<\/EM>. Aquí hay una buena explicación (no en JavaScript) de un EventBus cuando se trata de Java<\/A>. Básicamente es un sistema de mensajería singleton o global para tu aplicación.<\/P>

<\/P>

Lo que podrías estar haciendo ahora<\/STRONG><\/SPAN><\/P>Digamos por ejemplo que tienes dos widgets que quieres usar en tu aplicación y quieres pasar información entre ellos. Podrías intentar pasar cada widget al otro y tratar de escuchar eventos, pero eso se volvería desordenado bastante rápido. Podrías simplemente tener un módulo único que escuche eventos en cada widget similar a algo como esto.<\/P><\/P>on(widget1, 'load', function() {
  widget2.doSomething();
});
on(widget2, 'load', function() {
  widget1.doSomething();
});<\/PRE><\/P>No está tan mal, pero si tu aplicación tiene que crecer, descubrirás que esto puede volverse feo y difícil de depurar después de un tiempo.<\/P><\/P>Lo que podrías estar haciendo<\/STRONG><\/SPAN><\/P>Aquí es donde entra dojo\/topic. Cada widget puede usar dojo\/topic para suscribirse a ciertos mensajes. Esto es similar a eventos, pero no depende de dijits individuales.<\/P><\/P>topic.subscribe('dijit-message', function(payload) { \/** haz algo **\ });<\/PRE>Luego cualquier dijit u otra parte de tu aplicación puede publicar en ese canal.<\/P><\/P>topic.publish('dijit-message', { message: 'hello' });<\/PRE><\/P>¿Notas los métodos subscibe\/publish<\/EM>? Así es, dojo\/topic<\/EM> es un

pubsub.<\/A><\/STRONG> BOOM!<\/EM><\/P><\/P>Demostración<\/STRONG><\/SPAN><\/P>Aquí hay una demostración simple<\/A> de cómo podrías usar esto en tu aplicación.<\/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', '¡Haz clic aquí!');
      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: '¡Hola desde dijit1!' });
    }
  });
  
  var Dijit2 = declare([_WidgetBase], {
    postCreate: function() {
      this.btnNode = put(this.domNode, 'button', '¡Haz clic aquí!');
      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.& nbsp.; setTimeout(function() {
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; this.btnNode.innerHTML = oldValue;
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; }.bind(this), 1000);
 . & nbsp.; }.bind(this)));
& nb sp ; & nb sp ; },
& nb sp ; onClick: function() {
& nb sp ; & nb sp ; & nb sp ; topic.publish('dijit2-click', { value: '¡Hola desde dijit2!' });
& nb sp ; }
});

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

var map = new Map('map', {
& nb sp ; center: [-118, 34.5],
& nb sp ; zoom: 8,
& nb sp ; basemap: 'topo'
});
});< / PRE >< P >< / P >< P >< SPAN style = "font-size: 14pt;" >< STRONG > ¿Puedes ver la luz? < / STRONG >< / SPAN >< / P >< P > Con suerte, puedes ver cómo esta podría ser una forma poderosa de pasar datos entre tus widgets personalizados en tu aplicación. Uso esto bastante para gestionar qué widgets son visibles en una aplicación. Por ejemplo, hacer clic en un botón, mostrar widget1< / EM>, hacer clic en otro botón, cerrar widget1< / EM> y abrir widget2< / EM>. También lo uso para pasar una característica de la que tal vez dependan otros widgets.< / P >< P >< / P >< P > Hay muchas formas creativas en las que podrías usar dojo/topic< / EM> en tu aplicación. Esta fue solo una introducción rápida a un módulo que encuentro útil a diario.< / P >< / BODY >< / HTML >

KyleMorgan

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

Rene, great job as always.