Introdução rápida ao dbind

ReneRubalcava

<\/HEAD>

<\/P>

Então, todas as crianças descoladas do bairro têm data binding. Você pode fazer isso no Angular<\/A>, React<\/A>, ou Ember<\/A>. Em cada um desses casos, você meio que obtém data binding para o DOM pronto para usar. Dojo não funciona exatamente assim. Você pode fazer isso com certeza com um pouco de trabalho usando Stateful watch <\/A> e atualizando o DOM quando os dados mudam. Se você estiver usando dijits, definitivamente pode ligar a Stores e receber atualizações<\/A>, mas e quanto a elementos DOM comuns e antigos<\/EM>.<\/P><\/P>É aí que algo como dbind<\/A> entra em cena. dbind se enquadra na categoria que gosto de chamar de pacotes amigáveis ao Dojo<\/EM>. Ou seja, foi escrito para funcionar com Dojo, principalmente como projetos paralelos de um colaborador Dojo. Alguns deles se tornaram projetos completos sob SitePen<\/A>. Um exemplo recente seria dstore<\/A>.<\/P>

<\/P>

Amarrando as pontas soltas<\/H2>Então, o que o dbind traz para a mesa? Já falei sobre alguns usos antes neste post<\/A> e até alguns usos avançados neste post<\/A>. O que o dbind, em sua forma mais simples, permite que você faça é observar mudanças em um objeto e vincular essas mudanças a outra coisa<\/EM>. Por exemplo, talvez você queira vincular algum elemento de texto em sua aplicação à atividade no seu mapa. Você poderia fazer algo assim para vincular ao evento mouse-move do mapa.<\/P><\/P>require([\n  "dojo\/_base\/_declare",\n  "dojo\/_dom",\n  "dijit\/_WidgetBase",\n  "dijit\/_TemplatedMixin",\n  "dbind\/_bind",\n  "esri\/_map",\n  "esri\/_layers\/_FeatureLayer",\n  "dojo\/_domReady!"\n], function(\n    declare, dom, _WidgetBase, _TemplatedMixin,\n    bind,\n    Map, FeatureLayer\n) { \n  var map = new Map("map-div", {\n    center: [-118, 34.5],\n    zoom: 5,\n    basemap: "topo"\n  });\n  var url = '<\/SPAN>http:\/\/sampleserver1.arcgisonline.com\/ArcGIS\/rest\/services\/Demographics\/ESRI_Census_USA\/MapServer\/5';<\/A>\n  var layer = new FeatureLayer(url, { outFields: ['*'] });\n  map.addLayer(layer);\n  var template = '<div class=\"label-container\"><div>X: <span data-dojo-attach-point=\"xNode\">${x}<\\/div><div>Y: <span data-dojo-attach-point=\"yNode\">${y}<\\/div><\\/div>';\n  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {\n    templateString: template,\n    constructor: function() {\n      this.set('x', 0);\n      this.set('y', 0);\n    },\n    postCreate: function() {\n      bind(this.xNode).to(this, 'x');\n      bind(this.yNode).to(this, 'y');\n    }\n  });\n  var lblContainer = new LabelContainer(null, dom.byId('lbl-div'));\n  map.on('mouse-move', function(e) {\n    lblContainer.set('x', e.mapPoint.x);\n    lblContainer.set('y', e.mapPoint.y);\n  });\n});<\\PRE>

Você pode ver um exemplo disso em ação

aqui<\\/A>.<\\/P>

<\\/P>

Como você pode ver, você pode vincular elementos DOM às mudanças em um objeto<\\/EM>, e neste caso, conforme você move o mouse pelo mapa, o texto no elemento muda. Isso é muito legal mesmo<\\/STRONG>. As coordenadas, no entanto, parecem ser um pouco demasiadamente precisas<\\/EM>, seus usuários não precisam desse nível de detalhe, então você pode usar dbind para vincular essas mudanças a uma função<\\/EM> e então vincular o DOM aos resultados dessa função<\\/EM>. Parece confuso? É apenas uma mudança nesse código que você pode fazer assim.<\\/P><\\/P>  var fixed3 = function fixed3(n) {\n    return n.toFixed(3);\n } ; \n & nbsp ; var LabelContainer = declare([_WidgetBase , _TemplatedMixin], { \ n & nbsp ; templateString : template , \ n & nbsp ; constructor : function () { \ n & nbsp ; & nbsp ; this.set ('x' , 0 ); \ n & nbsp ; & nbsp ; this.set ('y' , 0 ); \ n & nbsp ; } , \ n & nbsp ; postCreate : function () { \ n & nbsp ; & nbsp ; var roundX = bind(fixed3).to(this , 'x' ); \ n & nbsp ; & nbsp ; var roundY = bind(fixed3).to(this , 'y' ); \ n & nbsp ; & nbsp ; bind(this.xNode).to(roundX); \ n & nbsp ; & nbsp ; bind(this.yNode).to(roundY); \ n & nbsp ; } \ n });<\\/PRE>Você pode ver este exemplo

aqui<\\/A>.<\\/P>

<\\/P>

Mais ferramentas na sua caixa de ferramentas<\\/H2>Como você pode ver, dbind pode ser bastante útil no desenvolvimento da sua aplicação. Talvez você tenha se encontrado dependendo da observação de mudanças em um objeto Stateful e muito código repetitivo para realizar o que você acha que deveria ser uma tarefa simples. dbind pode ajudar com isso. Considere dbind apenas mais uma ferramenta na sua caixa de ferramentas. Então leia um pouco sobre ele<\\/A> e veja se será útil para você. Eu consegui fazer algumas coisas bem legais usando dbind com dojo/topic<\\/A>, então tenho certeza que você definitivamente encontrará alguns usos para ele.<\\/P>

<\\/P>

Para mais dicas e truques geodev, confira meu

blog<\\/A>.<\\/P><\\/BODY><\\/HTML>