jquery模板中的javascript函数

前端之家收集整理的这篇文章主要介绍了jquery模板中的javascript函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
似乎我在 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而不是纯文本.

解决方法

要从另一个函数在模板中呈现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函数

猜你在找的jQuery相关文章