Dojo _hasDropDown - 如何以声明方式绑定属性?
Dojo _hasDropDown - How do I declaratively bind the properties?
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>
目的是:
- 用户最初只能看到带有占位符的文本框。
- 当他们单击它时,containerNode 会展开并显示 containerNode 内部的内容,可以是
dijit/Select
、dijit/form/ComboBox
或 dijit/form/FilteringSelect
。内部元素也会自动展开。
- 用户 select 在内部 select 中设置了一个值,然后对其进行了一些修改,以便在文本框中显示为
${fieldName}:${value}
。
服务器最终处理的数据是内部元素的值。
我目前面临的问题是我不知道如何使_HasDropDown 如上所述正常工作。它将 TextBox 呈现为高度为 0 的元素,然后立即显示内部元素。我不确定如何绑定内部节点以使其像下拉菜单一样工作。
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();
}
}
});
});
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>
目的是:
- 用户最初只能看到带有占位符的文本框。
- 当他们单击它时,containerNode 会展开并显示 containerNode 内部的内容,可以是
dijit/Select
、dijit/form/ComboBox
或dijit/form/FilteringSelect
。内部元素也会自动展开。 - 用户 select 在内部 select 中设置了一个值,然后对其进行了一些修改,以便在文本框中显示为
${fieldName}:${value}
。
服务器最终处理的数据是内部元素的值。
我目前面临的问题是我不知道如何使_HasDropDown 如上所述正常工作。它将 TextBox 呈现为高度为 0 的元素,然后立即显示内部元素。我不确定如何绑定内部节点以使其像下拉菜单一样工作。
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();
}
}
});
});