How to render HTML as rendered HTML in jQuery.tmpl()?

Question

I can't assign HTML properly using jQuery.tmpl(). If i pass value of something as html tag it is rendered as as it is instead of HTML tags rendered on page

<div id="window">
    <script id="lines" type="text/x-jquery-tmpl">
        <div id="${id}" class="line ${type}"><span>${name}</span>: ${body}</div>
    </script>
</div>



var line = {
            name: 'John',
            body: '<strong>hello</strong>
        };
        $('#lines').tmpl(line).appendTo('#window');

Mckay

Answer 1

You can wrap the template variable with {{html body}} to override the default encoding behavior.

Leviathan

you mean like so? <div id="${id}" class="line ${type}"><span>${name}</span>: ${{html body}}</div> – Mckay

without the dollar sign, just {{html body}}. here's a jsfiddle with it: jsfiddle.net/EW2Ca – Leviathan

cheers, one more question. Can i put js code behind all template logic in separate file? – Mckay

if you mean the var line...; and the $('#lines').tmpl(..)...; then yes :) – Leviathan

its work THX thx for google: jquery tmpl variable as with html tags – Triploid

@Mckay it does not metter where do you put the js :) – Livvi

Answer 2

In my Laravel Blade project, It's working only like the below syntax. @{{html body}}.

<div id="${id}" class="line ${type}">
    <span>${name}</span>: @{{html body}}
</div>

And we can add a method(HTML DOM return method) also here. like:

function getBody () {
   return '<b>hello</b>';
}

<div id="${id}" class="line ${type}">
    <span>${name}</span>: @{{html getBody()}}
</div>

Commissioner