javascript - validaciones - validar campo js

¿Cómo crear una lista de casilla de verificación con Dojo?

Question

Estoy consumiendo los servicios de ArcGis para crear un, llamémoslo, "Simple WebGis".

En una parte quiero tomar todas las FeatureLayers y crear una tabla de contenidos con casillas de verificación para activar y desactivar la visibilidad de la capa. Como resultado, todas las capas se muestran como texto pero faltan las casillas de verificación y no aparece un error de javascript que indique dónde se encuentra mi error.

Este es el código en cuestión:

 var map;
 var tocLayers = [];
 require([
            "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
            "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dojo/domReady!", "dijit/form/CheckBox"
          ], function (
            Map, FeatureLayer, Legend,
            arrayUtils, parser, dom, construct, CheckBox
          ) {
              parser.parse();
              window.infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
              map = new Map("map", {
                  basemap: "topo",
                  center: [8.7, 50.0],
                  zoom: 10
              });

              //defining layers here - omitted         

              tocLayers.push({ layer: noll, title: ''Layer1'' });
              tocLayers.push({ layer: eins, title: ''Layer2'' });
              tocLayers.push({ layer: zwei, title: ''Layer3'' });
              tocLayers.push({ layer: drei, title: ''Layer4'' });
              tocLayers.push({ layer: vier, title: ''Layer5'' });
              tocLayers.push({ layer: fuenf, title: ''Layer6'' });
              tocLayers.push({ layer: sechs, title: ''Layer7'' });
              tocLayers.push({ layer: sieb, title: ''Layer8'' });

              //add the legend - omitted

              //add check boxes 
              map.on(''layers-add-result'', function (results) {
                  arrayUtils.forEach(tocLayers, function (layer) {
                      var layerName = layer.title; console.log(layer.title);
                      var checkBox = new CheckBox({
                          name: "checkBox" + layer.layer.id,
                          value: layer.layer.id,
                          checked: layer.layer.visible,
                          onChange: function (evt) {
                              var clayer = map.getLayer(this.value);
                              clayer.setVisibility(!clayer.visible);
                              this.checked = clayer.visible;
                          }

                      });
                      //add the check box and label to the toc
                      construct.place(checkBox.domNode, dom.byId("toggle"), "after");
                      var checkLabel = construct.create(''label'', { ''for'': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after");
                      construct.place("<br />", checkLabel, "after");
                  });
              });

              map.addLayers([noll, eins, zwei, drei, vier, fuenf, sechs, sieb]);

          });

Marcado relacionado:

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''Table of Contents''">
    <span style="padding:10px 0;">LayerVisibility</span>
    <div id="toggle" style="padding: 2px 2px;"></div>

Al mirar el marcado prestado es ver esto:

<div class="dijitBorderContainer dijitContainer" id="dijit_layout_BorderContainer_2" widgetid="dijit_layout_BorderContainer_2" style="padding: 0px;"></div>
<label for="checkBoxgraphicsLayer3">Layer3</label>

No me es posible proporcionarle un violín, ya que los datos que se están consumiendo están protegidos por contraseña. Espero haber estropeado mi código en algún momento.

Pregunta / problema: ¿Por qué las casillas de verificación no se muestran en el marcado, pero los títulos de las capas y cómo puedo solucionar esto?

Answer 1

El error se encontraba al principio en mi función require() .

Original:

require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
         "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
         "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
         "dijit/layout/AccordionContainer", "dojo/domReady!", "dijit/form/CheckBox"
        ], function (
               Map, FeatureLayer, Legend,
               arrayUtils, parser, dom, construct, CheckBox
           ) {
                //...
             })

Después de eliminar todas las burlas en las que me mudé, al intentar cumplir los requisitos, se veía así:

require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
         "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
         "dijit/form/CheckBox","dojo/domReady!"
        ], function (
               Map, FeatureLayer, Legend,
               arrayUtils, parser, dom, construct, CheckBox
           ) {
                //...
             })

Y las casillas de verificación se procesan sin problemas.

Answer 2

Por lo general, cuando creo widgets programáticamente, proporciono el nodo DOM inmediatamente, por ejemplo:

var checkBox = new CheckBox({
    name: "checkBox" + layer.layer.id,
    value: layer.layer.id,
    checked: layer.layer.visible,
    onChange: function (evt) {
        var clayer = map.getLayer(this.value);
        clayer.setVisibility(!clayer.visible);
        this.checked = clayer.visible;
    }

}, construct.create("input", null, "toggle", "after"));

Eso podría funcionar para usted también. No es necesario que lo coloque después (para que la línea debajo también se pueda quitar).