データバインディングのためのAccessors

ReneRubalcava

<\/HEAD>

<\/P>

そうですね、私はAccessors<\/A>に少し親近感を持っています。これはArcGIS JS API 4.0 beta<\/A>の機能です。<\/P>

<\/P>

これについては多く書いてきました<\/A>。<\/P>

<\/P>

非常に多用途で、3.x APIの通常のイベント監視ではできなかったことが可能になります。カメラを操作したり、アプリケーションの状態を保存したり、さらに多くのことができます<\/EM>。<\/P><\/P>最近は

編集の可能性<\/A>や描画<\/A>シナリオについて考えています。多くの場合、単にジオメトリを編集するだけでなく、属性を編集しているのです。開発者としてAccessorsを活用してこれを実現する方法を試行錯誤しています。<\/P>

<\/P>

ここでは詳細には触れませんが、フィールドの詳細は

ArcGIS REST APIから返されるレイヤーデータ<\/A>で取得できます。これにより利用可能なフィールド、編集可能なもの、フィールドタイプなどがわかり、編集に非常に役立つ情報となります。この情報を活用してアプリケーションの編集フォームを動的に作成できます。<\/P>

<\/P>

このシナリオを少し簡略化しましょう。<\/EM><\/P><\/P>以下のことを行いたいと仮定します:<\/P>各属性フィールドの入力欄を表示する入力の変更を属性にバインドするその変更を表示する<\/P>Accessorsならこれが可能です。<\/STRONG><\/P><\/P>入力欄を作成し、その変更をAccessorにバインドする例を見てみましょう。<\/P><\/P>  function createInput(\/*Accessor*\/)target, \/*FieldName*\/)name) {
    var node = document.createElement('div');
    node.setAttribute('class', 'form-group');
    var lbl = document.createElement('label');
    lbl.innerText = name;
    var input = document.createElement('input');
    input.setAttribute('class', 'form-control');
    input.setAttribute('type', 'text');
    input.setAttribute('name', name);
    input.setAttribute('value', inputValue(target, name));
    node.appendChild(lbl);
    node.appendChild(input);
    on(input, 'keyup', function(e) {
      \/\/- アクセサーを更新
      target[e.target.name] = e.target.value;
    });
    return node;
  }<\/PRE><\/P>このサンプルでは、inputのkeyupイベントを監視しAccessorを更新しています。とてもシンプルです。<\/STRONG><\/EM><\/P><\/P>

これでAccessorへの変更を監視し、それに応じて何か処理ができます。おそらくFeatureServiceへ更新を送信し、サービスへすべての更新を同期させたいでしょう。

このバインディングを示すために、動的に生成されたフォームと更新内容表示用に無効化された別フォームとバインドします。

  qTask.execute(query).then(function (results) {
    var feature = results.features[0];
    var attr = new Accessor(feature.attributes);
    Object.keys(attr).sort().map(function(key) {
      \/\/- 特定のフィールドのみ表示
      if (key !== 'OBJECTID' && key !== '_accessorProps') {
        var node = createInput(attr, key);
        var elem = document.getElementById(key);
        elem.value = inputValue(attr, key);
        \/\/- 更新監視して無効化フォームも更新
        attr.watch(key, function(val) {
 &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp; elem.value = val;
 . & nbsp.& nbsp.& nbsp. });
& nbsp.& nbsp.& nbsp. entryForm.appendChild(node);
& nbsp. & nbsp. }
& nbsp. });
});< /PRE >< P > この方法はサービスへのクエリ実行後、属性をAccessorに変換します。また動的フォームも作成しますが、Accessorの変更監視によって無効化されたフォームも更新します。ここで必要なら

編集ツールなどを使いFeatureServiceへ更新送信も可能です。 < / P >< P >< STRONG > < A href = "http://jsbin.com/bugime/3/edit?js,output" rel = "nofollow noopener noreferrer" target = "_blank" > このJSBINで実際に見ることができます < / A > 。 < / STRONG > < / P >< P >< / P >< P > こちらはこのサンプルの少し最適化したバージョンです。 < / P >< PRE class = "lia-code-sample line-numbers language-none" > & nbsp ; qTask.execute(query).then(function (results) { & nbsp ; & nbsp ; & nbsp ; var feature = results.features[0]; & nbsp ; & nbsp ; & nbsp ; var attr = new Accessor(feature.attributes); & nbsp ; & nbsp ; & nbsp ; var props = Object.keys(attr).filter(function(key) { & nbsp ; & nbsp ; & nbsp ; & nbsp ; return key !== 'OBJECTID' & amp ; amp ; key !== '_accessorProps'; & nbsp ; & nbsp ; & nbsp ; }).sort(); & nbsp ; & nbsp ; & nbsp ; var nodeCache = {}; & nbsp ; & nbsp ; & nbsp ; attr.watch(props, function(val, _, name) { & nbsp ; & nbsp ; & nbsp ; & nbsp ; var elem; & nbsp ; & nbsp ; & nbsp ; & nbsp ; if (nodeCache[name]) { & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; elem = nodeCache[name]; & nbsp ; & nb sp ;& nb sp ;& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {& nb sp;} else {var elem = document.getElementById(name); nodeCache[name] = elem;} elem.value = val; }); props.map(function(prop) { var node = createInput(attr, prop); var elem = document.getElementById(prop); elem.value = inputValue(attr, prop); entryForm.appendChild(node); }); }); < / PRE >< P >< / P >< P > 見るとそれほど難しくありません。基本的にはAccessorへの更新処理を他のメソッドに委譲し、その変更が起きた時だけ監視すれば良いのです。 < / P >< P >< / P >< P > ぜひ試してみてください。Accessorsに深く触れて理解してください、きっと満足できるでしょう。 < / P >< P >< / P >< P > もっと地理開発のヒントやコツが知りたい方は私のブログをご覧ください。 < / P >< / BODY >< / HTML >