Question

ExpandableSearchComponent.html：

$(document).ready(function()
    {   
        $("#choice1").click(function()
        {
            var manufac=$("#choice1").val();
            $.ajax({
                url:"/result/"+manufac,
                success:function(opts)
                {

                    var opts=opts.split(',');
                    $("#list1").empty();
                    opts.shift();
                    opts.pop();

                    for (i=0;i<opts.length;i++)
                    {
                        $("#list1").append('<option value='+opts[i]+'>'+opts[i]+'</option>');

                    }

                    //console.log(typeof opts);

                }
        });
        });
    });

ExpandableSearchComponent.js：

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

打算像这样使用：

/**
 * 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 : ""
    });

});

目的是：

用户最初只能看到带有占位符的文本框。
当他们点击它时，containerNode会展开并显示containerNode中的内容，该内容可以是<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>，dijit/Select或dijit/form/ComboBox。内部元素也会自动扩展。
用户在内部选择中选择一个值，然后对其进行一些修改，使其在TextBox中显示为dijit/form/FilteringSelect。

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

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

Answer 1

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

dijit / _HasDropDown是一个提供下拉列表的dijit widget 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

＆＃13;

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();
            }
        }
    });
});

＆＃13;

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

1 个答案: