dbindの簡単な紹介

ReneRubalcava

<\/HEAD>

<\/P>

今どきのクールな子たちはみんなデータバインディングを持っています。Angular、React、またはEmberでそれができます。これらの各ケースでは、DOMへのデータバインディングが箱から出してすぐに使える形で提供されています。Dojoはそのようには動作しません。確かに少し手間をかければStateful watchを使ってデータが変わったときにDOMを更新することは可能です。dijitsを使っている場合は、確実にStoresにバインドして更新を受け取ることができますが、普通の古いDOM要素の場合はどうでしょうか。<\/P>

<\/P>

そこで登場するのがdbindのようなものです。dbindは私がDojoフレンドリーパッケージと呼ぶカテゴリに属します。つまり、主にDojoのコントリビューターのサイドプロジェクトとして書かれ、Dojoと連携して動作するように作られたものです。その中にはSitePenの下で本格的なプロジェクトになったものもあります。最近の例としてはdstoreがあります。<\/P>

<\/P>

結びつけることについて<\/H2>ではdbindは何をもたらすのでしょうか？以前この投稿やこの投稿でいくつかの使い方について話しました。dbindが最もシンプルな形でできることは、オブジェクトの変化を監視し、その変化を他の何かにバインドすることです。例えば、アプリケーション内のテキスト要素をマップ上のアクティビティにバインドしたい場合があります。このようにマップのmouse-moveイベントにバインドすることができます。<\/P><\/P>require([
  "dojo\/_base\/_declare",
  "dojo\/_dom",
  "dijit\/_WidgetBase",
  "dijit\/_TemplatedMixin",
  "dbind\/_bind",
  "esri\/_map",
  "esri\/_layers\/_FeatureLayer",
  "dojo\/_domReady!"
], function(
    declare, dom, _WidgetBase, _TemplatedMixin,
    bind,
    Map, FeatureLayer
) {
  var map = new Map("map-div", {
    center: [-118, 34.5],
    zoom: 5,
    basemap: "topo"
  });
  var url = '<\/SPAN>http:\/\/sampleserver1.arcgisonline.com\/ArcGIS\/rest\/services\/Demographics\/ESRI_Census_USA\/MapServer\/5';<\/A>
  var layer = new FeatureLayer(url, { outFields: ['*'] });
  map.addLayer(layer);
  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>';
  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.set('x', 0);
      this.set('y', 0);
    },
    postCreate: function() {
      bind(this.xNode).to(this, 'x');
      bind(this.yNode).to(this, 'y');
    }
  });
  var lblContainer = new LabelContainer(null, dom.byId('lbl-div'));
  map.on('mouse-move', function(e) {
    lblContainer.set('x', e.mapPoint.x);
    lblContainer.set('y', e.mapPoint.y);
  });
});<\/PRE>

この動作サンプルは

こちらで見ることができます。<\/P><\/P>ご覧の通り、DOM要素をオブジェクトの変化にバインドすることができ、この場合マップ上でマウスを動かすと要素内のテキストが変わります。これはかなりクールです。ただし座標は少し正確すぎるようで、ユーザーにはそこまで詳細な情報は必要ありません。そこでdbindを使って、その変化を関数にバインドし、さらにその関数の結果にDOMをバインドすることができます。難しく聞こえますか？このコードに対して一箇所変更するだけで次のようになります。<\/P><\/P>  var fixed3 = function fixed3(n) {
    return n.toFixed(3);
  };
  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.set('x', 0);
      this.set('y', 0);
    },
    postCreate: function() {
      var roundX = bind(fixed3).to(this, 'x');
      var roundY = bind(fixed3).to(this, 'y');
      bind(this.xNode).to(roundX);
      bind(this.yNode).to(roundY);
    }
  });<\/PRE>このサンプルはこちらで見ることができます。<\/P><\/P>ツールキットのさらなるツール<\/H2>ご覧の通り、dbindはアプリケーション開発で非常に役立ちます。Statefulオブジェクトの変化監視や多くのボイラープレートコードに頼ってしまい、本来なら簡単なタスクだと思うこともあるでしょう。dbindはそれを助けてくれます。dbindをあなたのツールキットのもう一つのツールとして考えてください。ぜひ少し調べてみてください、役立つかもしれません。私はdojo/topicと組み合わせたdbindでかなりクールなことをやってきましたので、きっとあなたも使い道を見つけられるでしょう。<\/P><\/P>ジオ開発のヒントやコツについてはをご覧ください。<\BODY><\HTML>