dojo/form/select addoption不起作用

Question

我在模板 html 文件和填充组合框的 JS 中使用数据附加点 distanceUnitSelect 定义元素 dijit/form/select。此外，组合框的初始化是在 postCreate 方法中完成的。

我在运行代码时遇到错误TypeError: this.distanceUnitSelect.addOption is not a function。请告知如何解决这个问题，问题，我是dojo的新手。

define([
    "dojo/_base/declare",
    'dojo/_base/lang',
    "dojo/on",
    'dojo/_base/array',
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./Widget.html",
    'dijit/form/Select'
], function(declare, lang,on, array,_WidgetBase, _TemplatedMixin, template) {

    /**
     * dijit._WidgetBase is the base class for all widgets in dijit, and in general
     * is the base class for all dojo based widgets.
     *
     * It provide life cycle method which get called at diffrent stages
     *
     */
    return declare([_WidgetBase, _TemplatedMixin], {

        /**
         * templateString is property used by _TemplatedMixin, to get the HTML template and put attach point
         * and event on it.
         * @type {[type]}
         */
        templateString: template,


        counter: 0,

        _initUnitSelect:function(){


        this._initDefaultUnits();
        var b = this.defaultDistanceUnits;
        console.log(b.length);
        this.distanceUnits = b;
         var test = this.distanceUnitSelect;
        array.forEach(this.distanceUnits,lang.hitch(this,function(unitInfo){
          var option = {
            value:unitInfo.unit,
            label:unitInfo.label
          };

           // dijit.byId("test").addOption(option);
            this.distanceUnitSelect.addOption(option);

        }));

      },

      _initDefaultUnits:function(){
        this.defaultDistanceUnits = [{
          unit: 'KILOMETERS',
          label: 'KILOMETERS'
        }, {
          unit: 'MILES',
          label: 'MILES'
        }, {
          unit: 'METERS',
          label:'METERS'
        }, {
          unit: 'FEET',
          label: 'FEET'
        }, {
          unit: 'YARDS',
          label: 'Yards'
        }];


      },



        /**
         * constructor method will be called before the parameters are mixed into the widget,
         * and can be used to initialize arrays
         */
        constructor: function() {
            console.log("in constructor");
        },

        /**
         * Most used life cycle method of _WidgetBase.
         * At this stage, widget has been rendered but not attached to node.
         */
        postCreate: function() {
            console.log("in postCreate...");
            this._initUnitSelect();
       },

       postMixInProperties: function(){
            this.inherited(arguments);
      },

        /**
         * Increases counter value to one.
         */
        incCounter: function() {
            console.log("in incCounter");
            //this.output.innerHTML = (++this.counter);

        },

        /**
         * Decrease counter value to one.
         */
        decrCounter: function() {
            console.log("in decrCounter");
            //this.output.innerHTML = (--this.counter);

        }

    });
});

<div data-dojo-type="dijit/layout/TabContainer" style="padding-top:100px;width: 100%; min-width: 100px;height: 50%;" tabStrip="true">
  <div data-dojo-type="dijit/layout/ContentPane" title="Draw Tools" selected="true">

    <div class="formContainer">
      <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="printSettingsFormDijit">
        <table cellspacing="5" style="width:100%;">
          <tr>
            <td style="width:65px;">
              Boundary Types:
            </td>
          </tr>
          <tr>
            <td>
              <select id="test" data-dojo-attach-point="distanceUnitSelect" data-dojo-type="dijit/form/Select" style="width:100%;height:30px; float: left;">
              </select>

            </td>



          </tr>
          <tr>
            <td>
              <button>Load Boundaries</button>&nbsp;
            </td>
            <td>



            </td>
          </tr>
          <tr>
            <div id="grid"></div>
          </tr>
      </div>
    </div>

    <span data-dojo-attach-point="output"></span>


    <div class="operations" onselectstart="return false;">
      <button data-dojo-attach-point="inc" data-dojo-attach-event="onclick:incCounter">Validate</button>&nbsp;
      <button data-dojo-attach-point="dec" data-dojo-attach-event="onclick:decrCounter">Create</button>
    </div>
  </div>
</div>

Answer 1

如果您的模板中有需要解析的小部件，那么您的小部件需要扩展'dijit/_WidgetsInTemplateMixin'，现在this.distanceUnitSelect 是一个简单的DomNode，因此将其添加到您的代码中以使其工作，阅读cmets

define([
    "dojo/_base/declare",
    'dojo/_base/lang',
    "dojo/on",
    'dojo/_base/array',
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    'dijit/_WidgetsInTemplateMixin', //ADD THIS IF YOU NEED TO PARSE WIDGET IN YOUR TEMPLATES
    "dojo/text!./Widget.html",
    'dijit/form/Select'
], function(declare, lang,on, array,_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {

    /**
    * Your comments .......
    */
    return declare([_WidgetBase, _TemplatedMixin, /*YOU ARE MISSING THIS*/_WidgetsInTemplateMixin], {
    //the rest of your code
    ............

阅读 a 编写的示例代码中的 cmets。

一些参考：
The _WidgetsInTemplateMixin Mixin
dijit._WidgetsInTemplateMixin