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

Question

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

如果我注释掉标题行，边框容器就可以正常加载。如果我把 div 放回去，页面将不再加载。

Answer 1

您 top 定义为 ContentPane API。 Banner 作为 dom 节点。所以要设置一个dom节点你需要设置内容。

top.set('content', banner);

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

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

或

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

如果您传递一个小部件，它必须继承 dijit/_WidgetBase 并且您需要在其上调用启动。

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

Answer 2

因为您只需要注入 html 内容，正确的方法是使用 denov 和 Manjunatha 描述的 'content' 属性。

在这种特殊情况下，正如 Manjunatha 所说，您不需要 domConstruct 部分，也许不需要 div，最后您可以在实例化语句中提供内容，因此紧凑形式将是，：var top = new ContentPane({..., content: title});。

然后您可以使用 top.addChild(aWidget) - e.g.for 菜单栏将小部件添加到顶部，然后该菜单栏将显示在内容（标题）下方。但是aWidget必须是widget，which banner不是。

Answer 3

看看这个 jsfiddle 最初，窗格的内容是 foo!酒吧！单击按钮 "Click" 内容将更改为 Button

**

HTML

**

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

</div>

**

JS代码

**

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%;
}

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

Why doesn't this Dojo snippet work?

dojo