CODEWITHSUNDEEP
jqueryjquery-templates
Anthony Webb
Anthony Webb

Reputation: 1351

jQuery Template - Executing JS code inside the template

I am trying to learn more about jQuery templates but cant seem to execute any JS calls inside the template.

<script id="log-item" type="text/x-jquery-tmpl">
 {{if title.length }}
   <h3 style="padding-bottom:5px;">${ title }</h3>
 {{/if}}
 objectToString(${ detail });
</script>

Note that my objectToString() function is never called, just rendered out as a string. I tried wrapping it in {{ }} on a whim but no luck. Anyone out there who can help?

Upvotes: 5

Views: 10565

Answers (2)

Harborhoffer
Harborhoffer

Reputation: 5926

Anthony, you can. The method your calling needs to be inside a template tag like so:

<script id="log-item" type="text/x-jquery-tmpl">
 {{if title.length }}
   <h3 style="padding-bottom:5px;">${ title }</h3>
 {{/if}}
 <p>
    Detail: ${ objectToString( detail ) }
 </p>
</script>

Upvotes: 8

Jimmy Chandra
Jimmy Chandra

Reputation: 6580

I am not sure where you have your objectToString is located, but if you see the reference here, you see them adding the necessary helper function into the .tmpl( method).

Here is an example... I tried to make it similar to what you have in the question...

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <title>Test jquery Templates</title> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> 
  <script type='text/javascript' src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
</head> 
<body> 
  <script id="testTemplate" type="text/x-jquery-tmpl"> 
    {{if title.length}}
      <h3>${title}</h3>
      <p>Detail: ${$item.objectToString("detail")}</p>
    {{/if}}
  </script>  
  <div id="bookList"></div> 
  <script type='text/javascript'> 
    $(function(){
      var book = [
        { title: "Goodnight, World!",
          detail: { author: "Jojo Mojo", synopsis : "What the ..." }},
        { title: "Rainbow",
          detail: { author: "Cookie", synopsis : "Huh?" }}
      ];

      $("#testTemplate").tmpl(book, {
        objectToString : function(key) {
          var detail = this.data[key];
          return detail.author +  " " + detail.synopsis;
        }
      }).appendTo("#bookList");
  });
  </script> 
</body> 
</html>

You can see it here.

Upvotes: 2

Related Questions