Функция JavaScript внутри шаблона JQuery - PullRequest
Новая
       3

Функция JavaScript внутри шаблона JQuery

6 голосов
/ 20 января 2011

Кажется, у меня есть некоторые проблемы с вызовом функции javascript внутри шаблона jquery. У меня здесь настроено демо: http://jsfiddle.net/SXvsZ/8/

Код выглядит так: 

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

и шаблон выглядит так: 

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

Похоже, он должен отображать "привет world ". Я бы хотел, чтобы он также отображал HTML как html, а не как обычный текст.

Ответы [ 4 ]

10 голосов
/ 20 января 2011

Чтобы отобразить html внутри шаблона из другой функции, вам нужно использовать тег шаблона {{html}}.

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

Вам также следует переместить функцию htmlDetail за пределы функции ready ()

2 голосов
/ 20 января 2011

Возвращаясь к вашему вопросу, проблема заключается в том, что htmlDetail необходимо определить до самого шаблона. (их примеры «предполагают»)

Здесь работает: http://jsfiddle.net/SXvsZ/9/

1 голос
/ 20 января 2011

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

Примечание это бета-версия в любом случае, поэтому она не завершена и, скорее всего, может измениться или даже устареть, так что не полагайтесь на это слишком многопока конечно, но экспериментируй с этим :)

0 голосов
/ 21 января 2011

Вы можете передать неглобальную функцию в шаблон, чтобы сделать ее авиалибированной внутри шаблона, если вы не хотите делать ее глобальной. 

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

ее можно использовать следующим образом, {{html}} будет отображать его без кодировки 

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