handlebars 怎么遍历一个二维表,比如象mongodb中取出来的数据
发布于 12 年前 作者 yakczh 9322 次浏览 最后一次编辑是 8 年前

比如数据是这种

var data={list:[  {name:'xxx' ,age:11 },
   {name:'yy' ,age:22 },
   {name:'z' ,age:33}
]};

用模板


<ul class="data_list">
  {{#each data}}
  <li>{{#each this}}

     <dt> {{name}} }</dt> <dd> {{age}} </dd>
     {{/each}}
  </li>
  {{/each}}
</ul>

这样数据遍历对了,但是没显示出来

4 回复

为什么还要each第二次呢,each针对数组,如果是json直接调用属性不就可以吗

mongodb中取出来的字段名字不一定全都一样 比如

var data={list:[  {name:'xxx' ,age:11 },
   {no:'yy' ,age:22 },
   {sql:'z' ,version:33}
]};

来源: stackoverflow上相似的问题

有两个方法解决不定的属性名字

  1. 重写物件属性

    data.newList=[]; data.list.forEach(function(k){ temp=[] for (var prop in k){ if (k.hasOwnProperty(prop)){ temp.push({ ‘key’ : prop, ‘value’ : k[prop] }); } } data.newList.push(temp); }); 模板

    <ul class=“data_list”> {{#with newList}} {{#each this}} <li> {{#each this}} <dt> {{key}} }</dt> <dd> {{value}} </dd> {{/each}} </li> {{/each}} {{/with}} </ul>


如果不需要key的话

data.newList=[];
data.list.forEach(function(k){
	var temp={};var i=1;
	for (var prop in k){
		if (k.hasOwnProperty(prop)){
			temp['value'+i]=k[prop];
		}
		i++;
	}
	data.newList.push(temp);
});

模板

<ul class="data_list">
	{{#with newList}}
		{{#each this}}
			<li>
			{{#with this}}
				<dt> {{value1}} }</dt> <dd> {{value2}} </dd>
			{{/with}}
			</li>
		{{/each}}
	{{/with}}
</ul>

2.使用自己的helper,详细请查看来源

@yakczh 同意下面的方法

回到顶部