jsRender Rendering HTML

Mayur Tendulkar picture Mayur Tendulkar · Jan 10, 2012 · Viewed 11k times · Source

I'm using jsRender to render my data on html page. The data gets rendered perfectly. However, in some content items, HTML text (like hyperlink) appears as text. In jquery template, there is a way to render HTML by {{html. Is there anything similar available in jsRender? My code is as follows:

<p>
{{ =Status}}   //need to convert this to HTML so it should appear as hyperlink.
</p> 

Thanks.

Answer

John Papa picture John Papa · Mar 7, 2012

The JsRender beta candidate is now out (see Boris' post from last night http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html)

I wrote a quick fiddle to show how to render HTML here: http://jsfiddle.net/johnpapa/NfUGB/

Basically, just use the {{>yourProperty}} tag to render it HTML encoding. Use {{:yourProperty}} to skip encoding.

<script id="template" type="text/x-jsrender">
    <p>
    {{:foo}}
    </p>
    <ul>
    {{for testData}}
        <li>{{:name}} - {{:markup}} - {{>markup}}</li>
    {{/for}}
    </ul>
</script>
<div id="div1"></div>

.

var vm = {
    foo: "names",
    testData: [
        {
            name: "John", 
            markup: "<span style='background: yellow'>John</span>"
        },
        {
            name: "Boris", 
            markup: "<span style='background: orange'>Boris</span>"
        }
    ]
};

$("#div1").html($("#template").render(vm));​
​