javascript - jsRender for in for，但是针对2种不同的结构

Question

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

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}}

但是，我在这两个对象中的键是动态的，所以我想要在 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);
}     

有人可以提出建议吗？

Answer 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}} block 中，key 是属性(字段)名称，prop 是值。 (参见http://www.jsviews.com/#propstag)。

~item=#data 定义一个变量(“辅助属性”)，您可以从嵌套 block 中访问该变量，以便轻松获取“父数据”那里。 (参见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));