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

Answer 2

回到你的问题，问题似乎是htmlDetail需要在模板本身之前定义。（他们的例子'建议'那个）

它在这里工作：http://jsfiddle.net/SXvsZ/9/

Answer 3

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

注意这是测试版本，所以它们还没有最终确定，很可能会改变甚至被弃用，所以不要过多地依赖它，但是要尝试它：）

Answer 4

如果您选择不将全局函数设置为全局，则可以将非全局函数传递给模板，使其在模板中变为avialbale。

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

它可以像这样使用，{{html}}将使其无需编码

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

jquery模板中的javascript函数

4 个答案: