jQuery 模板可以绑定到原始数​​组吗

Question

鉴于

<div id="place_holder" />

<script id="template" type="text/x-jquery-tmpl">
WHAT DO I PUT HERE
</script>

var array_of_ints = [1,2,3]

$( "#template" )
        .tmpl( array_of_ints   )
        .appendTo( "#place_holder" );

我可以在模板中放入什么来获得？

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Answer 1

<div id="place_holder" />

<script id="template" type="text/x-jquery-tmpl">
    {{= $data}}
</script>

var array_of_ints = [1,2,3]

$( "#template" )
    .tmpl( array_of_ints   )
    .appendTo( "#place_holder" );

{{= $data}} 在任何地方都适用（ ${} 在模板中的字符串中不起作用）

Answer 2

<ul id="place_holder">
</ul>

<script id="template" type="text/x-jquery-tmpl">
    <li>${}</li>       
</script>

var array_of_ints = [1,2,3]

$("#template")
    .tmpl(array_of_ints)
    .appendTo( "#place_holder" );

Answer 3

${} 不适用于字符串数组 ['A String','Another String','Yet Another String'] ，但 {{= $data}} 可以。谢谢！

Answer 4

您想要查看 {{each}}模板标签。

在这种情况下，我认为 jQuery.tmpl 并不是真正做到这一点的最佳方法。在我看来，使用标准的 for 循环会容易得多。

var array_of_ints = [1,2,3];

//creates the ul
var ul = $('<ul></ul>');

//creates the LI's
for(var i = 0; i < array_of_ints.length; i++){
    ul.append('<li>' + array_of_ints[i] + '</li>');
}

//adds to the placeholder
$('#placeholder').append(ul);

http://jsfiddle.net/LeKYu/