I have a template based dojo widget, and a HTML template for it, in a separate .html file.

The Dojo Widget:

define("dojow/SomeWidgetName",[
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyHTMLFile.html"], function(declare, _WidgetBase, _TemplatedMixin, template) {

return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    baseClass: 'dojowBaseClass',
    details:{} // THIS IS THE OBJECT THAT WILL BE LOOPED
    //  your custom code goes here
});});

The HMTL template:

<table> 
  <tr>
     <td>SomeService</td>
     <td>someUsername</td>
  </tr> </table>

What I need is to repeat the row of the table based on the "details" object I am having inside the dojo widget, so each row contains data from that object. Is that possible?

Thanks.

I have a template based dojo widget, and a HTML template for it, in a separate .html file.

The Dojo Widget:

define("dojow/SomeWidgetName",[
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/MyHTMLFile.html"], function(declare, _WidgetBase, _TemplatedMixin, template) {

return declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    baseClass: 'dojowBaseClass',
    details:{} // THIS IS THE OBJECT THAT WILL BE LOOPED
    //  your custom code goes here
});});

The HMTL template:

<table> 
  <tr>
     <td>SomeService</td>
     <td>someUsername</td>
  </tr> </table>

What I need is to repeat the row of the table based on the "details" object I am having inside the dojo widget, so each row contains data from that object. Is that possible?

Thanks.

• javascript
• html
• dojo

• Maybe you should make your question more concrete (show an example template, data, etc). – zord Commented Jan 15, 2014 at 17:46
• I have added new details. – user3199269 Commented Jan 16, 2014 at 9:14
• Always put objects and arrays in the constructor function otherwise these functions will be globally available(memory leaks). – GuyT Commented May 20, 2015 at 12:51

1 Answer 1

As far as I know: no. The templating language of Dojo is very basic and just offers attach points/events that you can use to programmatically change it. It's one of the shortings/weaknesses of Dojo (pared to templating engines like Handlebars), even ex-core-miters think that way.

So, an alternative approach to create a loop structure is programmatically creating one. Let's say our template is the following:

<ul data-dojo-attach-point="listNode"></ul>

Then you can do the following in your code:

domConstruct.create("li", {
    innerHTML: "test"
}, this.listNode);

That will result in the following HTML:

<ul data-dojo-attach-point="listNode">
    <li>test</li>
</ul>

So you can put that inside a loop in your code (and create many child items), but as you can see, the template language itself is lacking such a feature.

If you want to load "a template", you can define a child item template, and load it using:

domConstruct.place(lang.replace("<li>{text}</li>", {
    text: "test"
}), this.listNode);

Small note: The dojo/_base/lang is inconsistent with the widget templating. Placeholders in a templated widget are written like ${placeholder, but in dojo/_base/lang a placeholder is defined as {placeholder} (without the dollar sign).