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

时间:2011-12-15 12:13:02

标签: jquery templates jquery-plugins jquery-templates

我正在为模板使用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>

任何人的帮助/想法?

1 个答案:

答案 0 :(得分:2)

使用<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>