循环中的自定义dojo小部件; HTML不能正常流动

Question

我遍历一个对象数组，每次都向页面添加一个自定义小部件。我需要在每个小部件上放置一个“space”div，并在每个小部件的底部放置“pageBreak”div。这是在循环中创建/放置小部件：

var placeIt = true;
array.forEach(data.features,function(feat,i){
    var newDijit = new printDijit({}, domConstruct.create('div'));  
    newDijit.placeAt(dom.byId('printWindow'));
    newDijit.startup();
    if (placeIt){
            newDijit.cNode(domConstruct.create("div",{class:'space',innerHTML:'a'}));
            placeIt = false;
        }else{
            newDijit.cNode(domConstruct.create("div",{class:'break',innerHTML:'a'}));
            placeIt = true;
    }
});

这是小部件：

require([
"dojo/parser", 
"dojo/ready",
"dojo/_base/declare",
"dojo/dom-construct",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin"
], function(parser, ready, declare, domConstruct, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
    declare("printDijit", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],{
        templateString: dojo.cache(new dojo._Url("printDijit.html")),
        cNode: function(htmlCnode){
            domConstruct.place(htmlCnode,this.domNode.id,'before');
        }
    });     
});

这是小部件模板; printDijit.html

<div class="printTemplateCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div class="printHeaderCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top-header</div>
<div class="printInputsCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Top-right pane</div>
<div class="printBottomPaneCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'bottom', gutters:false">
    <div class="printPicCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'" style="width:342px">Bottom-left pane</div>
    <div class="printMapCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>     
</div>    

fireBug中的html看起来很好，但是第二个及以后的空格/破坏div位于小部件后面并且没有正确流动（见截图）。如果小部件声明一切都很好。

任何人都知道这里发生了什么？

Answer 1

必须将模板包装在外部div中，如下所示。我认为这是因为原始根元素也是一个小部件。

<div>
    <div class="printTemplateCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
        <div class="printHeaderCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top-header</div>
        <div class="printInputsCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Top-right pane</div>
    <div class="printBottomPaneCls" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'bottom', gutters:false">
        <div class="printPicCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'" style="width:342px">Bottom-left pane</div>
        <div class="printMapCls" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>     
    </div> 
</div>