Dojo로 체크리스트를 작성하는 방법은 무엇입니까?

Question

ArcGis 서비스를 생성하기 위해 "Simple WebGis"라고 부르 자.

한 부분에서는 모든 FeatureLayers를 가져 와서 체크 박스가있는 목차를 만들어 레이어 가시성을 켜고 끕니다. 결과적으로 모든 레이어가 텍스트로 표시되지만 확인란이 누락되어 내 오류 위치를 나타내는 자바 스크립트 오류가 표시되지 않습니다.

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 class="dijitBorderContainer dijitContainer" id="dijit_layout_BorderContainer_2" widgetid="dijit_layout_BorderContainer_2" style="padding: 0px;"></div> 
<label for="checkBoxgraphicsLayer3">Layer3</label> 

그것을 :

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

렌더링 된 마크 업보고시는이를 볼 수 있습니다 아니다 소비되는 데이터는 암호로 보호되므로 필자에게 피들을 제공 할 수 있습니다. 다행스럽게도 필자는 어느 시점에서 코드를 엉망으로 만들었을 것이다.

질문/문제 : 마크 업에 확인란이 표시되지 않고 레이어 제목이 표시되는 이유는 무엇이며 어떻게 해결할 수 있습니까? 나는 위젯 프로그램 만들 때

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

. 이후에 배치 할 필요가 없습니다 (아래의 행을 제거 할 수도 있음).