Шаблон jQuery - выполнение кода JS внутри шаблона - PullRequest
Новая
       3

Шаблон jQuery - выполнение кода JS внутри шаблона

5 голосов
/ 19 января 2011

Я пытаюсь узнать больше о шаблонах jQuery, но не могу выполнить какие-либо вызовы JS внутри шаблона. 

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

Обратите внимание, что моя функция objectToString () никогда не вызывается, а отображается как строка. Я попытался обернуть его в {{}} по прихоти, но безуспешно. Кто-нибудь может помочь?

Ответы [ 2 ]

8 голосов
/ 19 января 2011

Энтони, можешь. Метод, который вы вызываете, должен быть внутри тега шаблона, например: 

<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>
2 голосов
/ 19 января 2011

Я не уверен, где у вас находится objectToString, но если вы видите ссылку здесь , вы увидите, что они добавляют необходимую вспомогательную функцию в .tmpl (метод).

Вот пример ... Я пытался сделать его похожим на то, что у вас есть в вопросе ... 

<!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>

Вы можете увидеть это здесь .

...