BuzzObj.renderTemplate()

The renderTemplate() function of the BuzzObj allows you to use the power of the TrimPath templating engine, as well as the modifiers and Built-ins provided by the Widget Framework, after the initial rendering of your widget is complete. It allows you to specify your own template text and provide any data you wish, and then returns to you the resulting string. This is useful for rendering popups and other interface elements, or for working with data from outside NewsGator which may not be ready when your widget is initially loaded.

Using renderTemplate()

renderTemplate() is a property of a particular BuzzObj. This is because it includes functions, such as ${AttentionJS()}, that use data from that widget. Therefore, you must have a reference to a BuzzObj to use renderTemplate(). If you plan to use renderTemplate(), be sure to save off a reference to your BuzzObj somewhere that you can get at it later.

Additionally, you’ll need a template to supply to renderTemplate(). This can come from anywhere, but for this example we’ll use the {stringify} block, which is described in another KB article.

renderTemplate() takes two arguments, the template to use and an optional data object to supply to the template. The data object you provide will be available inside the template under the name Data. renderTemplate() returns the string result of the templating process. Usually this will be HTML that you’ll want to insert into some element using the innerHTML property.

An Example

Create a new widget and paste in the following for the HTML and Javascript.

HTML Template:

{stringify SubTemplate}

        <ul>

        {for item in Data}

               <li>${item}</li>

        {/for}

        </ul>

        Rendered: ${(new Date())|format:"MM/dd/yyyy h:mm:ss a"}

SubTemplate



{eval}

        //Save reference to template

        BuzzObj.SubTemplate= SubTemplate;

{/eval}

<input type="button"

        onclick="ngDemo_showColors(${BuzzObjJS})" 

        value="Colors" />

<input type="button" 

        onclick="ngDemo_showStates(${BuzzObjJS})"     

        value="States" />

<br />



<div id="ngDemo_Target"></div>

Javascript:

function ngDemo_showStates(BuzzObj){

        var states = ["Colorado", "New York", "California", "Alaska"];

        var html = BuzzObj.renderTemplate(BuzzObj.SubTemplate, states);

        document.getElementById("ngDemo_Target").innerHTML = html;

}



function ngDemo_showColors(BuzzObj){

        var colors = ["red", "green", "blue", "magenta", "cyan"];

        var html = BuzzObj.renderTemplate(BuzzObj.SubTemplate, colors);

        document.getElementById("ngDemo_Target").innerHTML = html;

}

When you preview this widget, you should see two buttons. Clicking either of the buttons will render the colors or states, along with the current timestamp.

When Not To Use renderTemplate()

Note that you should not use renderTemplate() for the initial rendering of your widget. It is more appropriate to use {for} loops or {macro} blocks instead.