1

我正在尝试DropDownButton使用 a创建一个 dijitDropDownMenu并使用 dojo mvc 使用菜单项填充它。这是可能的还是我需要手动创建/删除MenuItems？我已经尝试了以下，但DropDownMenu没有得到填充。

<div data-dojo-attach-point="person_select_btn" data-dojo-type="dijit/form/DropDownButton">
    <div data-dojo-attach-point="person_list_drop_menu" data-dojo-type="dijit/DropDownMenu">
        <div data-dojo-type="dojox/mvc/Repeat" 
             data-dojo-props="exprchar: '#' children: at(this.personListModel, 'model')">
            <div data-dojo-type="dijit/MenuItem"
                 data-dojo-props="label: at('rel:#{this.index}','personName')">
            </div>
        </div>
    </div>
</div>
4

1 回答 1

1

引入的 Dojo 1.8dojox/mvc/WidgetList有效地取代了dojox/mvc/Repeat. 有一种方法可以使用 来创建重复的菜单项dojox/mvc/WidgetList，例如（将 /path/to/dojotoolkit 替换为您环境中 Dojo Toolkit 的路径）：

<!DOCTYPE html>
<html>
    <head>
        <link id="themeStyles" rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/claro.css"/>
        <link rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/document.css"/>
        <script type="text/javascript" src="/path/to/dojotoolkit/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, isDebug: 1, async: 1, mvc: {debugBindings: 1}"></script>
        <script type="text/javascript">
            require([
                "dojo/parser",
                "dijit/Menu",
                "dijit/MenuItem",
                "dojox/mvc/getStateful",
                "dojo/domReady!"
            ], function(parser, Menu, MenuItem, getStateful){
                menuTemplateString = Menu.prototype.templateString; // So that dijit/Menu and dojox/mvc/WidgetList mix can refer to dijit/Menu's original templateString

                windowContextMenuData = getStateful([
                    {label: "Item One", onClick: function(){ alert("Hello world One"); }},
                    {label: "Item Two", onClick: function(){ alert("Hello world Two"); }},
                    {label: "Item Three", onClick: function(){ alert("Hello world Three"); }},
                    {label: "Item Four", onClick: function(){ alert("Hello world Four"); }},
                    {label: "Item Five", onClick: function(){ alert("Hello world Five"); }},
                    {label: "Item Six", onClick: function(){ alert("Hello world Six"); }},
                    {label: "Item Seven", onClick: function(){ alert("Hello world Seven"); }},
                    {label: "Item Eight", onClick: function(){ alert("Hello world Eight"); }},
                    {label: "Item Nine", onClick: function(){ alert("Hello world Nine"); }},
                    {label: "Item Ten", onClick: function(){ alert("Hello world Ten"); }}
                ]);

                parser.parse();
            });
        </script>
    </head>
    <body class="claro" role="main">
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <div id="windowContextMenu"
         data-dojo-type="dijit/Menu"
         data-dojo-mixins="dojox/mvc/WidgetList"
         data-dojo-props='contextMenuForWindow: true, style: "display: none;", children: windowContextMenuData, templateString: menuTemplateString'
         data-mvc-child-type="dijit/MenuItem"
         data-mvc-child-props='"*": at(this.target, "*")'>
        </div>
    </body>
</html>

不过，上述方法不适用于不同类型的菜单（如CheckedMenuItem）。即将发布的 Dojo 将解决这个问题： http: //trac.dojotoolkit.org/changeset/30158/dojo

于 2013-01-17T06:04:08.937 回答