6

似乎我在 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 而不是纯文本。

4

4 回答 4

10

要从另一个函数在模板内渲染 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() 函数之外

于 2011-01-20T03:12:59.890 回答
2

回到您的问题，问题似乎是htmlDetail需要在模板本身之前定义。（他们的例子“暗示”）

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

于 2011-01-20T01:57:06.050 回答
1

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

请注意，无论如何这是测试版，所以它们还没有最终确定，很可能会改变甚至被弃用，所以现在不要过分依赖它，但要尝试一下:)

于 2011-01-20T01:37:28.513 回答
0

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

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

它可以像这样使用，{{html}} 将在没有编码的情况下呈现它

 <p>Start: {{html $item.htmlDetail() }} :End</p>
于 2011-01-20T21:35:38.413 回答