如何使用Dojo創建複選框列表？

Question

我正在使用ArcGis服務創建一個，我們稱之爲「Simple WebGis」。

在一部分，我想採取所有的FeatureLayers和創建一個目錄與複選框切換圖層的可見性打開和關閉。 因此，所有圖層都顯示爲文本，但複選框已丟失，並且我沒有收到指示我的錯誤位於何處的javascript錯誤。

這是有問題的代碼：

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]); 

      }); 

相關標記：

<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> 

在觀看所呈現標記是看到這一點：

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

它不是可能爲我提供一個小提琴，因爲正在使用的數據是密碼保護的。希望我在某個時候搞砸了我的代碼。

問題/問題：爲什麼複選框沒有顯示在標記中，而是圖層的標題，我該如何解決這個問題？

Answer 1

該錯誤位於我的require()函數的開頭。

原文：

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 
      ) { 
       //... 
      }) 

而且複選框被完美地呈現：

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 
      ) { 
       //... 
      }) 

移除所有讓我感動的fideling，同時努力適應它看起來像這樣的要求後。

Answer 2

通常當我創建控件編程，我馬上給DOM節點，例如：

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")); 

這可能會爲你工作爲好。之後不需要放置它（所以它下面的行也可以被刪除）。