One of the things that I like about dojo is the django rendering engine. It provides an easy way to build HTML Templates and let you render values form a json object. The following example of a template is used to loop through a json array response.
<div>
{% for entry in feed.entries%}
<div style=”height: auto;”>
<div>
<div>{{entry.created}}</div>
<h2>
<a target=”_blank” href=”{{entry.link}}”>{{entry.title}}</a>
</h2>
</div>
<div>
<div>
{{entry.content|safe}}
</div>
</div>
</div>
{%endfor%}
</div>
This code is used in the dojo widget:
dojo.provide(“xptrss.list.feedcontroller”);
dojo.require(“dijit._Widget”);
dojo.require(“dojox.dtl._Templated”);
dojo.declare(“xptrss.list.feedcontroller”, [ dijit._Widget, dojox.dtl._Templated ], {
proxyurl:null,
feed : null,
templateString : dojo.cache(“xptrss.list.feedcontroller”, “../../html/rssTemplate.html”),
targetid: null,
postCreate: function() {
var mySelf = this;
var xhrArgs = {
url : mySelf.proxyurl,
handleAs : “json”,
preventCache : true,
load : function(data) {
mySelf.feed = data;
mySelf.render();
dojo.style(mySelf.targetid +”_feedLoader”, {
display : “none”
});
},
error : function(error) {
alert(error);
}}
var deferred = dojo.xhrGet(xhrArgs);
}
});
With the statement templateString : dojo.cache(“xptrss.list.feedcontroller”, “../../html/rssTemplate.html”) the html will be loaded. The “postCreation()” handles the loading of the values. With “mySelf.render()” the loaded JSON object will be applied to the HTML Template and the django engine loops through all entries and applies the code between {% for …. } {%endfor%} for each entry.
But what if an element in an entry (like the content value) is pure HTML Code?
The django engine is so clever and escapse all content correct, but we need the content unescaped in this particular case. The statement {{entry.content|safe}} does the trick!
This is code from our new project XPages Toolkit.