Acessores para vinculação de dados

ReneRubalcava

<\/HEAD>

<\/P>

Então sim, eu tenho uma certa afinidade por Accessors<\/A> na ArcGIS JS API 4.0 beta<\/A>.<\/P>

<\/P>

Eu

escrevi muito sobre eles<\/A>.<\/P>

<\/P>

Eles são incrivelmente versáteis, permitindo que você faça coisas que não podia fazer com a observação regular de eventos na API 3.x. Você pode brincar com a câmera, salvar o estado da sua aplicação e muito muito mais<\/EM>.<\/P><\/P>Ultimamente tenho pensado em

possíveis edições<\/A> e cenários de desenho<\/A> que você pode obter dos Accessors. Muitas vezes, você não está apenas editando geometria, você está editando atributos<\/EM>. Tenho experimentado como você, como desenvolvedor, pode aproveitar os Accessors para realizar isso.<\/P><\/P>Não vou entrar em detalhes aqui, você pode obter os detalhes dos campos a partir dos dados da camada retornados pela ArcGIS REST API<\/A>. Isso vai te dizer quais campos estão disponíveis, quais são editáveis, qual é o tipo do campo, o que é uma informação realmente poderosa usada para edição. Você pode usar essa informação para criar dinamicamente seus formulários de edição para sua aplicação.<\/P>

<\/P>

Vamos simplificar um pouco esse cenário.<\/EM><\/P><\/P>Vamos apenas supor que você quer fazer o seguinte:<\/P>Exibir entradas para cada campo de atributo<\/LI>Vincular mudanças na entrada aos atributos<\/LI>Exibir essas mudanças<\/LI><\/UL><\/P>Accessors podem nos permitir fazer isso.<\/STRONG><\/P><\/P>Vamos ver como criar uma entrada que vincula as mudanças da entrada ao Accessor.<\/P><\/P>  function createInput(\/*Accessor*\/)target, \/*FieldName*\/)name) {\n    var node = document.createElement('div');\n    node.setAttribute('class', 'form-group');\n    var lbl = document.createElement('label');\n    lbl.innerText = name;\n    var input = document.createElement('input');\n    input.setAttribute('class', 'form-control');\n    input.setAttribute('type', 'text');\n    input.setAttribute('name', name);\n    input.setAttribute('value', inputValue(target, name));\n    node.appendChild(lbl);\n    node.appendChild(input);\n    on(input, 'keyup', function(e) {\n      \/\/- atualiza o accessor\n      target[e.target.name] = e.target.value;\n    });\n    return node;\n  }<\/PRE><\/P>Nesse exemplo, escutamos o evento keyup da entrada e atualizamos o Accessor. Bastante simples.<\/STRONG><\/EM><\/P><\/P>

Agora você pode observar as mudanças feitas no accessor e fazer algo com isso. Provavelmente você vai querer enviar uma atualização para um FeatureService e simplesmente sincronizar cada atualização com o serviço.<\/P>

Para demonstrar essa vinculação, vou vincular o formulário gerado dinamicamente a outro formulário que está desabilitado para mostrar as atualizações.

  qTask.execute(query).then(function (results) {\n    var feature = results.features[0];\n    var attr = new Accessor(feature.attributes);\n    Object.keys(attr).sort().map(function(key) {\n      \/\/- exibe apenas certos campos\n      if (key !== 'OBJECTID' && key !== '_accessorProps') {\n        var node = createInput(attr, key);\n        var elem = document.getElementById(key);\n        elem.value = inputValue(attr, key);\n        \/\/- observa atualizações e atualiza o formulário desabilitado\n        attr.watch(key, function(val) {\n &nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp:& nbsp: elem.value = val; \ n & nbsp: & nbsp: & nbsp: & nbsp: & nbsp: }); \ n & nbsp: & nbsp: & nbsp: & nbsp: entryForm.appendChild(node); \ n & nbsp: & nbsp: } \ n & nbsp: }); \ n });< / PRE >< P > Este método faz a consulta do serviço e transforma os atributos em um Accessor. Ele também cria o formulário dinâmico, mas note que ele observa as mudanças no Accessor e atualiza o formulário desabilitado. É aqui que você poderia passar atualizações para um FeatureService também se quisesse, talvez usando as 

ferramentas de edição aqui.< / P >< P >< STRONG >Você pode ver isso em ação neste JSBIN.< / STRONG >< / P >< P >Aqui está uma versão um pouco otimizada deste exemplo.< / P >< PRE class="lia-code-sample line-numbers language-none">& nbsp ; qTask.execute(query).then(function (results) { \ n & nbsp ; var feature = results.features[0]; \ n & nbsp ; var attr = new Accessor(feature.attributes); \ n & nbsp ; var props = Object.keys(attr).filter(function(key) { \ n & nbsp ; return key !== 'OBJECTID' & amp ; amp ; key !== '_accessorProps'; \ n & nbsp ; }).sort(); \ n & nbsp ; var nodeCache = {}; \ n & nbsp ; attr.watch(props, function(val, _, name) { \ n & nbsp ; var elem; \ n & nbsp ; if (nodeCache[name]) { \ n & nbsp ; elem = nodeCache[name]; \ n & nbsp ; } else { \ n & nbsp ; elem = document.getElementById(name); \ n & nbsp ; nodeCache[name] = elem; \ n & nbsp ; } \ n & nbsp ; elem.value = val; \ n & nbsp ; }); \ n & nbsp ; props.map(function(prop) { \ n & nbsp ; var node = createInput(attr, prop); \ n & nbsp ; var elem = document.getElementById(prop); \ n & nbsp ; elem.value = inputValue(attr, prop); \ n & nbsp ; entryForm.appendChild(node); \ n & nbsp ; }); \ n }); < / PRE >< P >< / P >< P >Isso realmente não é tão difícil quando você olha. Você basicamente pode delegar as atualizações para o Accessor para alguns outros métodos e simplesmente observar quando as mudanças acontecem nele.< / P >< P >< / P >< P >Brinque com isso, mergulhe fundo nos Accessors e deixe isso absorver, você não vai se decepcionar.< / P >< P >< / P >< P >Para mais dicas e truques geodev, confira meu blog.< / P >< / BODY >< / HTML >