javascript - 按类检索 dijit 元素

Question

我想按类检索 dijit 元素。基于这些docs ，我尝试了下面的代码。我在 dijit/工具栏上有几个 dijit/form/ToggleButtons 用于某些 map 功能，我正在尝试解决切换问题。问题是，我收到:“未捕获的类型错误:dijit.registry.byClass 不是函数”

require([
  "esri/geometry/Extent",
  "esri/toolbars/navigation",
  "dojo/on",
  "dijit/registry",
  "dijit/Toolbar",
  "dijit/form/Button",
  "dijit/form/ToggleButton"
  //"dojo/domReady!"
],
function (Extent, Navigation, on, registry, Toolbar, Button, ToggleButton) {


  var navToolbar;

  navToolbar = new Navigation(window.myMap);


  var zoomInButton = new ToggleButton({
    label: "Zoom Avant",
    showLabel: false,
    iconClass: "zoominIcon",
    checked: false,
    onClick: function () {
      //alert("test button clicked")
      navToolbar.activate(Navigation.ZOOM_IN);
      toggleButtonIcon(this);
    }
  }, "zoomin");
  zoomInButton.startup();

  var zoomOutButton = new ToggleButton({
    label: "Zoom Arrière",
    showLabel: false,
    iconClass: "zoomoutIcon",
    onClick: function () {
      //alert("test button clicked")
      navToolbar.activate(Navigation.ZOOM_OUT);
      toggleButtonIcon(this);
    }
  }, "zoomout");
  zoomOutButton.startup();


  //this toggles the button highlight in the toolbar to show which tool is currently active
  //note - doesn't do the FullExtent since it's a button not a togglebutton
  function toggleButtonIcon(tool) {
    //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
    dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
      if (togbtn == tool) {
        togbtn.attr("checked", true);
      }
      else {
        togbtn.attr("checked", false);
      }
    });
  }
});

HTML:

<div class="toolContainer">
  <div class="navBarClass" id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" style="background-color:#ffffff;">
    <button type="button" id="zoomin"></button>
    <button type="button" id="zoomout"></button>
  </div>

</div>

更新:我注意到 this docs page一些可能相关的附加信息。然而，我现在对我的选择是什么感到困惑(道场新手)。我正在寻找使用 dojo/query。我需要能够根据类别区分几个按钮和其他按钮。

Note that for backwards compatibility, the dijit.registry global variable (as opposed to the dijit/registry module) includes array iterator methods (forEach, filter, byClass, map, every, and some). However, AMD code should not expect these functions to be available in the Object returned from require([“dijit/registry”]).

Answer 1

你需要了解，如何this工作中。这里有两个方法被链接起来。完整的调用是:

dijit.registry.forEach(function(w){
     w.containerNode.appendChild(dojo.create("div"));
}).byClass("dijit.Dialog").forEach(function(w){ /* only dijit.Dialog instances */ });

第一个方法 dijit.registry.forEach() 返回 dijit/WidgetSet 的实例 ( Doc )。 dijit/WidgetSet 实例有一个方法 byClass。此方法的作用是将初始的 WidgetSet 减少为新的 WidgetSet 实例，该实例将仅包含那些 declaredClass 为 的小部件在本例中为 >dijit.Dialog。

要按类检索 dijit 元素，您可以结合使用 dojo/query 和 registry/getEnlookingWidget。首先使用该类查询小部件的所有 DOM 节点。

var domNodes= query('.myClass', this.domNode);

然后，迭代此列表以查找与每个 domNode 对应的小部件。

domNodes.forEach(function(domNode){
    var widget= registry.getEnclosingWidget(domNode);
    //do your processing
});