jquery模板中的javascript函数

Question

似乎我在jquery模板中调用javascript函数时遇到了一些问题.我在这里设置了一个演示: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>

好像它应该呈现"hello world "我想让它也将HTML呈现为html而不是纯文本.

Answer 1

要从另一个函数在模板中呈现html,您需要使用{{html}}模板标记.

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

您还应该在ready()函数之外移动htmlDetail函数