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. のTh eユーザは最初にテキストボックスをプレースホルダで見るだけです。
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/form/Select、 dijit/form/ComboBox、dijit/form/DropDownButton、 dijit/form/DateTextBoxなどのウィジェットはすべて、dihit/_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(); 
 
      } 
 
     } 
 
    }); 
 
});