2013-01-15 45 views
1

我想創建一個dijit DropDownButtonDropDownMenu並使用dojo mvc使用菜單項填充它。這是可能的還是我需要手動創建/刪除MenuItems?我已經嘗試了下面,但DropDownMenu沒有得到填充。使用dojo mvc創建dojo MenuItems重複

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

回答

1

道場1.8推出dojox/mvc/WidgetList有效地取代dojox/mvc/Repeat。有一種方法來創建重複菜單項與dojox/mvc/WidgetList,像(更換/路徑/到/ 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

+0

啊,我在dojo 1.7上,但是看到與repeat-widget中的data-dojo-mixins類似的東西。我只是不完全瞭解事情是如何放在一起的。謝謝你分享這個答案,很多解釋。 :) –