0

嗨，我有这两个不同的东西：

columns = {
 name:"Name",
 ref:"Reference"
}

items:[
{ id:1, name:"Dan", ref:"01" },
{ id:2, name:"Dan2", ref:"02" }]

我需要把它们放在一个像这样的表中：

| Name | Reference |
| Dan  | 01        |
| Dan2 | 02        |

通常这将是：

{{for columns}}
  {{:name}} {{:ref}}<br>
{{/for}}
{{for items}}
  {{:name}} {{:ref}}<br>
{{/for}}

但是，我在 2 个对象中的键是动态的，所以我想在 javascript 中这样：

var header = "";
for(key in Object.keys(columns){
   header+=" "+columns[key));
}
console.log(header);
for(var i=0;i<items.length;i++){ 
  var item = items[i]; 
  var line ="";  
  for(key in Object.keys(columns){
     line+=" "+items[key);
  }
  console.log(line);
}

任何人都可以提出任何建议吗？

4

1 回答 1

1

你可以这样做：

<script id="tmpl" type="text/x-jsrender">
    <table><thead><tr>
        {{props columns}}
            <th>{{:prop}}</th>
        {{/props}}
    </tr></thead>
    <tbody>
        {{for items}}
            <tr>
                {{props ~root.columns ~item=#data}}
                    <td>{{:~item[key]}}</td>
                {{/props}}
            </tr>
        {{/for}}
    </tbody></table>    
</script>

{{props}}迭代对象的属性 - 在{{props}}块内，key是属性（字段）名称和prop值。（见http://www.jsviews.com/#propstag）。

~item=#data定义了一个变量（一个“辅助属性”），您可以从嵌套块中访问，以便从那里轻松获取“父数据”。（参见http://www.jsviews.com/#samples/jsr/paths）。

以上假设使用以下数据：

var data = {
    columns: {
        name:"Name",
        ref:"Reference"
    },
    items:[
        { id:1, name:"Dan", ref:"01" },
        { id:2, name:"Dan2", ref:"02" }
    ]
}

$("#result").html(tmpl.render(data));
于 2014-08-02T19:47:53.097 回答