为什么jQuery模板{{each}}标签与jQuery $ .each对JavaScript字符串数组的解释不同？

强制性的jsFiddle例子 。

当我通过jQuery的$.each函数运行一个字符串数组时，我得到了我期望的结果。

 $.each(["abc", "123", "def", "456"], function (i, val) { $("
").text("source[" + i + "]: " + val).appendTo(".eachResults"); // run for each string in the array ("abc", "123", ...) }); 

但是，当我通过jQuery Template的{{each}}运算符运行相同的字符串数组时，它将它视为char的二维数组。

  
 {{each(i, prop) $data}} {{if $data.hasOwnProperty(i)}} 
 source[${i}]: ${$data[i]} {{! run for each char of each string in array (0:"a", 1:"b", 2:"c", 0:"1", 1:"2", 3:"3", ...)}} 
 {{/if}} {{/each}} 
  $("#testTemplate").tmpl(["abc", "123", "def", "456"]).appendTo(".tmplResults"); 

由于模板中的i似乎总是正确地引用到$data ，所以我根本不知道这个索引是如何工作的。 看起来i需要是一个二维索引才能正常工作，但它似乎不是（ typeof (i) === "number" ）。

后续问题

@ mblase75肯定在这里解释了这个问题。 不幸的是，鉴于这是我实际代码的一个子集， 当你遇到一个字符串数组时 ，结果却提出了一个关于递归调用{{each}}模板的另一个问题 。

Answer 1

请记住，模板是一个隐式循环。 您的原始{{each}}循环遍历每个字符串中的每个字符 – 模板循环遍历数组中的每个字符串。

这将为您提供所需的结果（或多或少）：

http://jsfiddle.net/wuEyp/10/使用上面的代码。 索引消失了，因为模板似乎没有在“根”级别提供它。

http://jsfiddle.net/wuEyp/11将使用函数添加索引。 出于某种原因，我无法通过闭包正确地完成它。