Dojo _hasDropDown - 如何声明性地绑定属性？ [英] Dojo _hasDropDown - How do I declaratively bind the properties?

问题描述

ExpandableSearchComponent.html：

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：

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} 。

1. The user at first only sees the textbox with the placeholder.
2. When they click it, the containerNode expands and shows what's inside the containerNode, which can either be a dijit/Select, a dijit/form/ComboBox or a dijit/form/FilteringSelect. The internal element is also automatically expanded.
3. The user selects a value in the internal select, which then gets modified a bit so it's shown in the TextBox as ${fieldName}:${value}.

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

The data that's eventually processed by the server is the value of the internal element.

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

The problem I'm currently facing is that I have no idea how to make the _HasDropDown work properly as mentioned above. It renders the TextBox as an element with height 0 and then immediately shows the internal element. I'm not sure how to bind the internal nodes for it to work like a dropdown should work.

推荐答案

dijit / _HasDropDown 是一个mixin，通过继承向widget添加下拉功能。它不是用作小部件，特别是在声明式标记中。

dijit/_HasDropDown is a mixin to add dropdown functionality to a widget by inheritance. It is not intended to be used as a widget, especially in declarative markups.

dijit / _HasDropDown是一个dijit小部件mixin， down
菜单功能。小工具像dijit / form / select，
dijit / form / ComboBox，dijit / form / DropDownButton和
dijit / form / DateTextBox都使用dijit / _HasDropDown来实现他们的
下拉功能

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

Please refer this document on how to use 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();
            }
        }
    });
});

这篇关于Dojo _hasDropDown - 如何声明性地绑定属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！