javascript - Dojo _hasDropDown - 如何以声明方式绑定(bind)属性？

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. 用户在内部选择中选择一个值，然后对其进行一些修改，以便在文本框中显示为 ${fieldName}:${value}。

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

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

Answer 1

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

dijit/_HasDropDown is a dijit widget mixin that provides drop-down menu functionality. Widgets like dijit/form/Select, dijit/form/ComboBox, dijit/form/DropDownButton, and dijit/form/DateTextBox all use dijit/_HasDropDown to implement their drop-down functionality.

有关如何使用 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();
            }
        }
    });
});