为什么这个Dojo片段不起作用？

Question

因此，当我尝试将div插入BorderContainer时，我的页面无法加载。到底是怎么回事？我做错了什么？

如果我注释掉横幅线，边框容器加载就好了。如果我重新放入div，则页面不再加载。

Answer 1

您top定义为ContentPane API。和Banner作为domNode。所以要设置一个domNode，你需要设置内容。

top.set('content', banner);

如果您想将一个小部件（将其视为代码，而不是HTML）添加到内容页面，则需要添加它。

top.set('content', bannerWidget.domNode);

或

bannerWidget.startup();
top.addChild(bannerWidget);

如果你传递一个小部件，它必须是dijit / _WidgetBase的子类，你需要在它上面调用startup。

我更喜欢每个窗格使用一个小部件。我有多个小部件将它们包装成一个小部件。

Answer 2

由于您只需要注入html内容，所以正确的方法是使用“内容”。属性如denov和Manjunatha所述。

在特殊情况下，正如Manjunatha所说，你不需要domConstruct部分而不是div，最后你可以在实例化语句中提供内容，因此紧凑形式将是：{{ {1}}。

然后，您可以使用top.addChild（aWidget）将小部件添加到顶部 - 例如，对于菜单栏，该菜单栏将显示在内容（标题）下方。但是aWidget必须是一个小部件，而横幅则不是。

Answer 3

看看这个jsfiddle最初，窗格的内容是foo！酒吧！然后点击“点击”按钮，内容变为按钮

**

• HTML

**

<div id="target"></div>
<div id="click">

</div>

**

• JS Code

**

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");

dojo.ready(function() {
    var bc = new dijit.layout.BorderContainer( {
        'class': 'theBorderContainer'
    }, 'target');

    var p1 = new dijit.layout.ContentPane( {
        region: 'center',
        content: '<p>foo! bar!</p>'
    });
    var p2 = new dijit.layout.ContentPane( {
        region: 'top',
        content: '<p>top!</p>'
    });

  var btn = new dijit.form.Button({
  name:"button",
  title:"Hello",
  label:"Hello"
  });

  var btn1 = new dijit.form.Button({
  name:"click",
  title:"Click",
  label:"Click",
  onClick:function(evt){
  p1.set('content',btn);
  }
  },click);


    bc.startup();

    bc.addChild(p1);
    bc.addChild(p2);
    p1.startup();
});

**

• CSS代码

**

body, html {
    width: 100%;
    height: 100%;
}
.theBorderContainer{
    width: 100%;
    height: 90%;
}