jquery tmpl访问嵌套数组中的子元素答案

【问题标题】：jquery tmpl accessing sub elements in nestd arrayjquery tmpl访问嵌套数组中的子元素
【发布时间】：2012-01-21 03:23:39
【问题描述】：

我正在为模板使用 jQuerys “tmpl”插件。现在我有一个数组，其中的元素也是数组，我必须访问特定的元素。

即数组将是：

var arr = {
  'id':23422,
  'title':'example',
  'images': {'small':'34fge.jpg','original':'dfsdf354.jpg'}
};

现在在寺庙里我想访问 arr[images][small] 但它不起作用。我正在尝试的是：

<div>
  <h3>${title}</h3>
  <img src="${arr}{images}{small}" />
</div>

任何人有任何帮助/想法吗？

【问题讨论】：

标签： jquery templates jquery-plugins jquery-templates

【解决方案1】：

使用<img src="${images.small}" /> 将给出以下标记：

<div>
  <h3>example</h3>
  <img src="34fge.jpg">
</div>

实际上，images 属性不是嵌套的array，而是带有属性的object。

但如果你真的想循环遍历一个嵌套数组，那么你应该使用nested template 并稍微改变你的语法（注意图像属性周围的 []）：

Javascript

var arr = {
    'id': 23422,
    'title': 'example',
    'images': [
        { 'small': '34fge.jpg', 'original': 'dfsdf354.jpg' },
        { 'small': '35fge.jpg', 'original': 'dfsdf.jpg' }
    ]
};

模板

<script id="template" type="text/x-jquery-tmpl">
   <div>
     <h3>${title}</h3>
     {{tmpl(images) "#imagesTemplate"}}
   </div>
</script>
<script id="imagesTemplate" type="text/x-jquery-tmpl">
     <img src="${small}" />
     <img src="${original}" />
</script>

【讨论】：

感谢所有建议，我已经在迭代了。我可能会添加另一个子模板来处理图像。好主意。
你能告诉我吗？如何将多个值传递给像 {{tmpl(arg1,arg2)}} 这样的子模板？以及如何在子模板中访问它们？
您能用您的问题创建一个新主题吗？否则有同样问题的人不会找到它。谢谢你。