Question

I have static TabContainer and all the ContentPanes inside the TabContainer should be created dynamically from the json data which got from servlet. All the ContentPanes share the same template which only data is different. Like:

[Tab A] Tab B Tab C
Name: Jerry
Age: 28
Birthday: 2.9

When click Tab B:

Tab A [Tab B] Tab C
Name: Michael
Age: 45
Birthday: 2.10

The content of ContentPane is far more complex than this sample and it’s declaretively written in html so I cannot create it promatically like this:

var cp1 = new dijit.layout.ContentPane({
    title:"New Question",
    content:"<p>I am added promatically</p>",
});

dijit.byId("centerLayout").addChild(cp1);

So, how can I implement this by “template” or something concept in Dojo?
Maybe there is a more strong component that I don’t know can bind the queried data to all these repeated ContentPane.

Any sample code is highly appreciated.

Answer 1

Simple template using lang.replace

Depending on the complexity of the ContentPane contents/template, one simple way to do it would be to use a simple lang.replace. Let’s say you make the name/age/birthday template like this (e.g. cai/personTpl.html):

<dl>
    <dt>Name</dt><dd>{name.firstname} {name.lastname}</dd>
    <dt>Age</dt><dd>{age}</dd>
    <dt>Birthday</dt><dd>{birthday}</dd>
</dl>

In your Javascript, you can then do:

require([..other deps.., 'dojo/_base/lang', 'dojo/text!cai/personTpl.html'],
    function(..other deps.., lang, personTpl) {
        //.. your other code .. 
        // assuming person[i] is something like:
        //   {name: {firstname: 'A', lastname: 'B'}, age: 42..}
        var cp1 = new dijit.layout.ContentPane({
            title:"New Question",
            content: lang.replace(personTpl, person[i]),
         });
         dijit.byId("centerLayout").addChild(cp1);
    }
);//~require

More about dojo/_base/lang::replace with dictionary here: http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-replace

---

More complex template using a custom widget

If the template used in each tab is more complex, e.g. having widgets on its own, using events etc, you may be better off writing a custom widget (instead of using ContentPane).

For example, the template can be something like (cai/widgets/personTpl.html):

<dl>
    <dt>Name</dt><dd data-dojo-attach-point='nameNode'></dd>
    <dt>Age</dt><dd data-dojo-attach-point='ageNode'></dd>
    <dt>Birthday</dt><dd>
        <input type='text' data-dojo-type='dijit/form/DateTextBox'
            data-dojo-attach-point='bdayInput' />
     </dd>
</dl>

And the widget can be (cai/widgets/Person.js):

define([ ..other deps.., "dojo/text!cai/widgets/personTpl.html"],
    function(..other deps.., personTpl) {
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
            templateString: personTpl,

            name: "unknown",
            _setNameAttr: { node: "nameNode", type: "innerHTML" },

            age: 0,
           _setAgeAttr: { node: "ageNode", type: "innerHTML" },

           birthday: new Date(),
           _setBirthdayAttr: function(bday) { 
               this.bdayInput.set("value", bday); 
               this._set("birthday", bday); 
           }
        }); //~declare
    }
); //~define

Then you can add instances of the Person widget to the TabContainer:

require([..other deps.., "cai/widgets/Person"],
    function(..other deps.., Person) {
        //.. your other code .. 
        // assuming person[i] is something like:
        //   {name: "Jerry", age: 42, birthday: new Date(), title: "JerryTab"}
        var p = new Person(person[i]);
        dijit.byId("centerLayout").addChild(p);
    }
);//~require

More about widgets (and widgets with attributes mapped to nodes) here: http://dojotoolkit.org/reference-guide/1.8/quickstart/writingWidgets.html#mapping-widget-attributes-to-domnode-attributes