Dojo _hasDropDown - 如何以声明方式绑定属性？

Question

ExpandableSearchComponent.html：

<div class="${baseClass}">
    <div data-dojo-type="dijit/_HasDropDown" data-dojo-props="dropDown: 'containerNode'">
        <div data-dojo-type="dijit/form/TextBox"
        name="${SearchViewFieldName}Textbox"
        class="${baseClass}Textbox"
        data-dojo-props="placeholder:'${fieldName}'"></div>
        <div class="${baseClass}Container" data-dojo-attach-point="containerNode"></div>
    </div>
</div>

ExpandableSearchComponent.js：

/**
 * Javascript for ExpandableSearchComponent
 */
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin",
        "dojo/text!./templates/ExpandableSearchComponent.html",
        "dijit/form/TextBox", "dijit/_HasDropDown" ], function(declare,
        _WidgetBase, _TemplatedMixin, template, TextBox) {

    return declare([ _WidgetBase, _TemplatedMixin ], {
        templateString : template,
        SearchViewFieldName : "",
        fieldName : ""
    });

});

打算这样使用：

<div data-dojo-type="js/widgets/ExpandableSearchComponent"                                  
    data-dojo-props="SearchViewFieldName: 'machineSearchView.name', fieldName: 'Name:'">    
    <div data-dojo-type="dojo/store/Memory"                                                 
        data-dojo-id="machineNameStore"                                                     
        data-dojo-props="<s:property value='%{getNameJsonString()}'/>"></div>               
    <s:set name="MachineName" value="machineSearchView.name"                                
        scope="request"></s:set>                                                            
    <div data-dojo-type="dijit/form/ComboBox"                                               
        data-dojo-props="store:machineNameStore, searchAttr:'name', value:'${MachineName}'" 
        name="machineSearchView.name" id="machineSearchView.name"></div>                    
</div>                                                                                      

意图是：

1. 用户起初只看到带有占位符的文本框。
2. 当他们单击它时，containerNode 会展开并显示containerNode 内部的内容，可以是dijit/Select、dijit/form/ComboBox 或dijit/form/FilteringSelect。内部元素也会自动展开。
3. 用户在内部选择中选择一个值，然后对其稍作修改，使其在 TextBox 中显示为 ${fieldName}:${value}。

服务器最终处理的数据是内部元素的值。

我目前面临的问题是我不知道如何使 _HasDropDown 如上所述正常工作。它将 TextBox 呈现为高度为 0 的元素，然后立即显示内部元素。我不确定如何绑定内部节点以使其像下拉菜单一样工作。

Answer 1

dijit/_HasDropDown 是一个通过继承向小部件添加下拉功能的 mixin。它不适合用作小部件，尤其是在声明性标记中。

dijit/_HasDropDown 是一个提供下拉菜单的 dijit 小部件 mixin 菜单功能。像 dijit/form/Select 这样的小部件， dijit/form/ComboBox、dijit/form/DropDownButton 和 dijit/form/DateTextBox 都使用 dijit/_HasDropDown 来实现他们的 下拉功能。

请参考此文档了解如何使用dijit/_HasDropDown。 http://dojotoolkit.org/reference-guide/1.10/dijit/_HasDropDown.html

define([ "dojo/_base/declare", "dijit/form/Button", "dijit/_HasDropDown" ],
    function(declare, Button, _HasDropDown){
    return declare([Button, _HasDropDown], {
        isLoaded: function(){
            // Returns whether or not we are loaded - if our dropdown has an href,
            // then we want to check that.
            var dropDown = this.dropDown;
            return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
        },

        loadDropDown: function(callback){
            // Loads our dropdown
            var dropDown = this.dropDown;
            if(!dropDown){ return; }
            if(!this.isLoaded()){
                var handler = dropDown.on("load", this, function(){
                    handler.remove();
                    callback();
                });
                dropDown.refresh();
            }else{
                callback();
            }
        }
    });
});