Accesseurs pour la liaison de données

ReneRubalcava

<\/HEAD>

<\/P>

Donc oui, j'ai une certaine affinité pour les Accessors<\/A> dans l'ArcGIS JS API 4.0 beta<\/A>.<\/P>

<\/P>

J'en ai

beaucoup écrit<\/A>.<\/P>

<\/P>

Ils sont incroyablement polyvalents, vous permettant de faire des choses que vous ne pouviez pas faire avec la surveillance d'événements classique dans l'API 3.x. Vous pouvez manipuler la caméra, sauvegarder l'état de votre application et beaucoup beaucoup plus<\/EM>.<\/P><\/P>Dernièrement, j'ai réfléchi à des

scénarios possibles d'édition<\/A> et de dessin<\/A> que vous pouvez obtenir avec les Accessors. Souvent, vous n'éditez pas seulement la géométrie, vous éditez les attributs<\/EM>. J'ai expérimenté comment vous, en tant que développeur, pouvez exploiter les Accessors pour réaliser cela.<\/P><\/P>Je ne rentrerai pas dans les détails ici, vous pouvez obtenir les détails des champs à partir des données de couche retournées par l'ArcGIS REST API<\/A>. Cela vous indiquera quels champs sont disponibles, lesquels sont éditables, quel est le type de champ, ce qui est une information vraiment puissante utilisée pour l'édition. Vous pouvez exploiter ces informations pour créer dynamiquement vos formulaires d'édition pour votre application.<\/P>

<\/P>

Nous allons simplifier un peu ce scénario.<\/EM><\/P><\/P>Supposons simplement que vous souhaitez faire ce qui suit :<\/P>Afficher des entrées pour chaque champ d'attribut<\/LI>Lier les modifications dans l'entrée aux attributs<\/LI>Afficher ces modifications<\/LI><\/UL><\/P>Les Accessors peuvent nous permettre de faire cela.<\/STRONG><\/P><\/P>Regardons comment créer une entrée qui lie les modifications de l'entrée à l'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) {
      \/\/- mettre à jour l'accessor
      target[e.target.name] = e.target.value;
    });
    return node;
  }<\/PRE><\/P>Dans cet exemple, nous écoutons l'événement keyup de l'entrée et mettons à jour l'Accessor. Assez simple.<\/STRONG><\/EM><\/P><\/P><\/P>Maintenant vous pouvez surveiller les changements effectués sur l'accessor et faire quelque chose avec cela. Vous voudriez probablement envoyer une mise à jour à un FeatureService et simplement synchroniser chaque mise à jour avec le service.<\/P><\/P>Pour démontrer cette liaison, je vais lier le formulaire généré dynamiquement à un autre formulaire désactivé pour montrer les mises à jour.<\/P><\/P>  qTask.execute(query).then(function (results) {
    var feature = results.features[0];
    var attr = new Accessor(feature.attributes);
    Object.keys(attr).sort().map(function(key) {
      \/\/- afficher seulement certains champs
      if (key !== 'OBJECTID' && key !== '_accessorProps') {
        var node = createInput(attr, key);
        var elem = document.getElementById(key);
        elem.value = inputValue(attr, key);
        \/\/- surveiller les mises à jour et mettre à jour le formulaire désactivé
 &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; attr.watch(key, function(val) {
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; elem.value = val;
&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.; });
&nbsp.& nbsp.& nbsp.& nbsp.; entryForm.appendChild(node);
&nbsp.& nbsp.; }
&nbsp.; });
});< /PRE >< P > Cette méthode effectue la requête du service et transforme les attributs en Accessor. Elle crée également le formulaire dynamique, mais remarquez qu'elle surveille les changements sur l'Accessor et met à jour le formulaire désactivé. C'est là que vous pourriez aussi transmettre des mises à jour à un FeatureService si vous le souhaitez, peut-être en utilisant les

outils d'édition ici.< / P >< P >< STRONG >Vous pouvez voir cela en action dans < A href = "http://jsbin.com/bugime/3/edit?js,output" rel = "nofollow noopener noreferrer" target = "_blank" > ce JSBIN </ A > .</ STRONG >< / P >< P >< / P >< P >Voici une version un peu optimisée de < A href = "http://jsbin.com/bugime/6/edit?js,output" rel = "nofollow noopener noreferrer" target = "_blank" > cet exemple </ A > .< / 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 ;& nb sp ; & nb sp ; & nb sp ; elem = nodeCache[name];
& nb sp ; & nb sp ; & nb sp ; } else {
& nb sp ; & nb sp ; & nb sp ; elem = document.getElementById(name);
& nb sp ; & nb sp ; & nb sp ; nodeCache[name] = elem;
& nb sp ; & nb sp ; }
& nb sp ; & nb sp ; elem.value = val;
& nb sp ; & nb sp ; });
& nb sp ; & nb sp ; props.map(function(prop) {
& nb sp ; & nb sp ; & nb sp ; var node = createInput(attr, prop);
& nb sp ; & nb sp ; & nb sp ; var elem = document.getElementById(prop);
& nb sp ; & nb sp ; & nb sp ; elem.value = inputValue(attr, prop);
& nb sp ; & nb sp ; & nb sp ; entryForm.appendChild(node);
& nb sp ; & nb sp });
});< / PRE >< P >< / P >< P >Ce n'est vraiment pas trop difficile quand on y regarde. Vous pouvez essentiellement déléguer les mises à jour de l'Accessor à d'autres méthodes et simplement surveiller quand des changements ont lieu dessus.< / P >< P >< / P >< P >Amusez-vous avec ça, plongez-vous profondément dans les Accessors et laissez-le s'imprégner, < EM > vous ne serez pas déçu < / EM > .< / P >< P >< / P >< P >Pour plus d'astuces geodev, < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank" > consultez mon blog </ A > .< / P >< / BODY >< / HTML >