Question

我正在尝试使用DropDownButton创建一个dijit DropDownMenu，并使用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>

Answer 1

Dojo 1.8引入了dojox/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

使用dojo mvc重复创建dojo MenuItems

1 个答案: