1

を使用して dijit を作成し、dojo mvc を使用してメニュー項目を設定しようとしてDropDownButtonいDropDownMenuます。これは可能ですか、それとも手動で作成/削除する必要があり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.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

于 2013-01-17T06:04:08.937 に答える