RSS

Rendering HTML Code with DJANGO and DOJO

19 Jul

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.

 
Leave a comment

Posted by on July 19, 2013 in Domino, Java, XPages

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: