jsRender Rendering HTML

Question

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.

Promontory

Answer 1

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));​
​

Elaboration

Answer 2

Use {{:Status}} to generate HTML code.

Trehala

Answer 3

Looking at jsRender's source code I can see that the plugin converts the <, > and & characters into their HTML entities. Maybe you can try to change those lines from jsRender

escapeMapForHtml = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;"
},

to

escapeMapForHtml = {
},

Mind the security risk of inserting unchecked HTML from external sources!

EDIT: OK, checking the examples (esp. 03_no-encoding.html) brought another solution. So go ahead and undo my previously proposed change and try using

{{=Status!}

The exclamation mark should prevent jsRender from changing HTML

Vivienviviene

It doesn't work. It considers that HTML as string and puts within "". for example <p>"<a href="gmail.com" title="Click to open in a new window or tab" target="&#95;blank">gmail.com</a>"</p> – Promontory

Maybe you should delete the first (non-working) part of your answer? – Paralytic

Then the comments won't fit the answer any more. I think I will keep it "as is" – Vivienviviene

Not a good idea to change those lines in JsRender. The previous syntax for esaping was {{=Status}} and for not escaping was {{=Status!}}. With the recent beta candidate, the syntax is {{>Status}} for escaping, and {{:Status}} for not escaping. The answer from John Papa below is correct... – Talos

Answer 4

Try this..

<p>
{^{ =Status}}   
</p>

Palliate