我遇到了一个自定义dojo小部件的问题。
我正在使用MVC结构来构建我的小部件，我也在使用dojo的dojox / mvc功能。
我有一个模板，它有一个WidgetList和一个InlineTemplate。
我的问题是，当商店里面有超过50件物品时，它很慢。
有时需要15秒才能在屏幕上显示渲染数据。
有没有人遇到过这个问题，如果有的话你是怎么解决的？
如果您需要更多信息，请问我。
编辑：
这是包含WidgetList和InlineTemplate的模板：
如果你看到不应该在这里的东西，请告诉我！
<div>
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div class="container-fluid">
<div class="row-fluid" id="flaggedWidgetList2">
<div>
<h3>Test 1</h3>
</div>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo.attach-point="flaggedPoint"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(this.controller.model.listItems, 'Items')">
<script type="dojox/mvc/InlineTemplate">
<div class="row-fluid" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'notRead'), _setValueAttr: {node: 'domNode', type: 'cssClass'}">
<div class="row-fluid itemRow">
<div class="span1" style="float: left;">
<input class="span3" type="checkbox" style="float: left;" />
<span class="dateRecieved span9" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'DateReceived'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
</div>
<div class="span1" style="float: left;">
<span class="span12" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'PriorityFlag'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
</div>
<div class="span10" style="float: left;">
<div class="row-fluid">
<span class="from span3" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Sender'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
<span class="docId span1 offset8" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentNumber'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
</div>
<div class="row-fluid">
<span class="title span12" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Title'), id: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
</div>
<div class="row-fluid">
<span class="span3" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentType'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b>[]</b></span>
<span class="deadline span1 offset8" data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Deadline'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span10 offset2" data-dojo-type="DTWidgets/ActionsMenu/ActionMenu" data-dojo-attach-point="itemId" data-dojo-props="itemId: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'itemId'}"">
</div>
</div>
</div>
</script>
</div>
</div>
</div>
谢谢，
梭伦
答案 0 :(得分：0)
dojox/mvc/WidgetList基于dijit/_Container，并且通过addChild()使用domConstruct.place()添加子项。当孩子基于dijit/_WidgetsInTemplateMixin时（dojox/mvc/_InlineTemplateMixin正在使用），dojo/parser针对每个孩子运行以实例化模板中的小部件。
我认为这两个是考虑dojox/mvc/WidgetList表现的主要部分。前者（对addChild()的调用）已完成in dojox/mvc/WidgetList code而后者（在模板中实例化小部件）已完成in dijit/_WidgetsInTemplateMixin code，因此您可能需要仔细查看每次迭代所花费的时间，例如，使用performance.now() API等。根据具体情况，可能需要深入挖掘，例如Chrome Developer Tool's timeline panel。
下面的代码可能有助于作为入门者，尽管渲染子窗口小部件并不需要很长时间：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/resources/dojo.css";
@import "//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
data-dojo-config="parseOnLoad: 0, async: 1"></script>
<script type="text/javascript">
require([
"dojo/_base/array",
"dojo/parser",
"dojo/when",
"dojo/Stateful",
"dojox/mvc/StatefulArray",
"dojo/domReady!"
], function(array, parser, when, Stateful, StatefulArray){
model = new Stateful({items: []});
when(parser.parse(), function(){
model.set("items", new StatefulArray(array.map(new Array(50), function(){
return new Stateful({
notRead: 1,
cssClass: "cssClass",
DateReceived: "DateReceived",
PriorityFlag: 1,
Sender: "Sender",
AttachmentNumber: 1,
Title: "Title",
WobNum: 1,
AttachmentType: "AttachmentType",
Deadline: "Deadline"
});
})));
});
});
</script>
</head>
<body>
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div>
<div>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(model, 'items'), partialRebuild: 1">
<script type="dojox/mvc/InlineTemplate">
<div>
<div data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'notRead'), _setValueAttr: {node: 'domNode', type: 'cssClass'}">
<div>
<div>
<input type="checkbox" />
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'DateReceived'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
</div>
<div>
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'PriorityFlag'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
</div>
<div>
<div>
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Sender'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentNumber'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
</div>
<div>
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Title'), id: at('rel:', 'WobNum'), _setValueAttr: {node: 'domNode', type: 'innerText'}"></span>
</div>
<div>
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'AttachmentType'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b>[]</b></span>
<span data-dojo-type="dijit/_WidgetBase" data-dojo-props="value: at('rel:', 'Deadline'), _setValueAttr: {node: 'domNode', type: 'innerText'}"><b></b></span>
</div>
</div>
</div>
</div>
</script>
</div>
</div>
</div>
</body>
</html>
希望那些帮助。
最佳， 晃