CODEWITHSUNDEEP
javascripthtmldojo
user3199269
user3199269

Reputation: 43

Dojo HTML template: repeating a piece of HTML inside the HTML template

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.

Upvotes: 3

Views: 3742

Answers (1)

Dimitri Mestdagh
Dimitri Mestdagh

Reputation: 44665

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 shortcomings/weaknesses of Dojo (compared to templating engines like Handlebars), even ex-core-commiters 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).

Upvotes: 8

Related Questions