javascript function inside jquery template

Question

Seems I am having some issues calling a javascript function inside a jquery template. I've got a demo set up here: http://jsfiddle.net/SXvsZ/8/

Code looks like:

function htmlDetail(){
   return "hello <strong>world</strong>"; 
}

var book = [
    { title: "Goodnight, World!",
  detail: { author: "Jojo Mojo", synopsis : "What the ..." }},
{ title: "Rainbow",
  detail: { author: "Cookie", synopsis : "Huh?" }}
];

$("#testTemplate").tmpl(book).appendTo("#bookList");

and the template looks like:

<script id="testTemplate" type="text/x-jquery-tmpl">
    {{if title.length}}
      <h3>${title}</h3>
      <p>Start: ${ htmlDetail() } :End</p>
    {{/if}}
</script>

<div id="bookList"></div>

Seems like it should render "hello world" I'd like to have it also render the HTML as html and not plain text.

Hmm, I didn't even know jquery had this :)

Nikita Rybak
– Nikita Rybak

2011-01-20 01:27:19 +00:00
Commented Jan 20, 2011 at 1:27 — Nikita Rybak
– Nikita Rybak, Commented Jan 20, 2011 at 1:27

Harborhoffer · Accepted Answer · 2011-01-20 03:12:59Z

10

To render html inside the template from another function, you will need to use the {{html}} template tag.

<script id="testTemplate" type="text/x-jquery-tmpl">
    {{if title.length}}
      <h3>${title}</h3>
      <p>Start: {{html htmlDetail() }} :End</p>
    {{/if}}
</script>

You should also move the htmlDetail function outside of your ready() function

answered Jan 20, 2011 at 3:12

Harborhoffer

5,9463 gold badges21 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikita Rybak · Accepted Answer · 2011-01-20 01:57:06Z

2

Getting back to your question, the problem seems to be that htmlDetail needs to be defined before template itself. (their examples 'suggest' that)

It works here: http://jsfiddle.net/SXvsZ/9/

answered Jan 20, 2011 at 1:57

Nikita Rybak

68.1k22 gold badges163 silver badges183 bronze badges

Comments

Val · Accepted Answer · 2011-01-20 01:37:28Z

1

http://api.jquery.com/template-tag-html/

Note this are the beta version anyways so they are not finalised and most likely might change or even be deprecated so don't rely on that too much as of yet ofcourse but do experiment with it :)

answered Jan 20, 2011 at 1:37

Val

17.6k24 gold badges99 silver badges148 bronze badges

1 Comment

Jviaches Over a year ago

Link is not valid anymore

thaj · Accepted Answer · 2011-01-20 21:35:38Z

0

You can pass the a non global function to the template to make it avialbale inside the template, if you choose not to make it global.

$("#testTemplate").tmpl(book, {htmlDetail : htmlDetail} ).appendTo("#bookList");

it can be used like this, {{html}} will render it with no encoding

 <p>Start: {{html $item.htmlDetail() }} :End</p>

answered Jan 20, 2011 at 21:35

thaj

1

Collectives™ on Stack Overflow

javascript function inside jquery template

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related