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