Why doesn't this Dojo snippet work?

问题:

So when I try to insert a div into the BorderContainer, my page does not load. What is going on? What am I doing wrong?

If I comment out the banner lines, the border container loads just fine. If I put the div back in, the page no longer loads.

回答1:

you have top define as ContentPane API. and Banner as domNode. so to set a domNode you need to set content.

top.set('content', banner);

if you want to add a widget (think of these as code, not HTML) to a content page you need to add it's dom.

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

or

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

if you pass a widget it must subclass dijit/_WidgetBase and you need to call startup on it.

I prefer to use a single widget per pane. i have multiple widgets wrap them up into a single widget.

回答2:

Since you only need to inject html content indeed the right approach is to use the 'content' attribute as described by denov and Manjunatha.

In that particular case also, as said by Manjunatha, you don't need the domConstruct part and maybe not the div, and finally you can provide content in the instantiation statement, so the compact form would be, :var top = new ContentPane({..., content: title});.

You can then add widgets to top by using top.addChild(aWidget) - e.g.for a menu bar, which would then appear below the content (the title). But aWidget has to be a widget, which banner is not.

回答3:

take a look at this jsfiddle Initially, content for the pane is foo! bar! and on click of the button "Click" content gets changed to a Button

**

• 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 code

**

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