backbone.jsmarionettedojodijit.layout

Dojo / Dijit Layouts without Non-Semantic HTML

I'm new to dojo/dijit, coming from a Backbone/Marionette background.

Right now I'm working with dijit's layout system, but I'm kinda shocked by the amount of non-semantic html in the examples needed to get it moving. For example, an accordion (from http://dojotoolkit.org/reference-guide/1.9/dijit/layout/ContentPane.html):

 <div data-dojo-type="dijit/layout/AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;">
    <div data-dojo-type="dijit/layout/AccordionPane" title="pane #1">accordion pane #1</div>
    <div data-dojo-type="dijit/layout/AccordionPane" title="pane #2">accordion pane #2</div>
    <div data-dojo-type="dijit/layout/AccordionPane" title="pane #3">accordion pane #3</div>
</div>

Is there a way to do this without having to add all that into the HTML? Specifically, I'm trying to find the equivalent of 'regions' in dijit layout, so I can include a template for a layout and place views in and out of that easily.

Solution

  • you can create content panes programmatically as in this accordion container example. (AccordionPane is deprecate, just use ContentPane instead)

    var accordion = new AccordionContainer({
    style: "width: 200px; height: 100%;"
}).placeAt(document.body);

var content = new ContentPane({
        title: "content1",
        style:"height:100px"
    });
accordion.addChild(content);
accordion.startup();

    if you need to use regions, bordercontainer's design property gives you that as in this example. you can put an accordioncontainer in one of the content panes there...