Создание элементов меню dojo с помощью dojo mvc Repeat

Я пытаюсь создать dijit DropDownButton с 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>

menuitem dojo
person Chuck L    schedule 15.01.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В 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

person asudoh    schedule 17.01.2013
comment
Ах, я на додзё 1.7, но видел нечто подобное с data-dojo-mixins с виджетом Repeat. Я просто не совсем понял, как все устроено. Спасибо, что поделились этим ответом, многое объясняет. :) - person Chuck L; 18.01.2013