0

尝试从 json 构建动态输出并使用 jq/template tmpl 显示行/列。不知何故，我需要遍历列和行，不确定如何。

我不知道json 属性的名称，所以它需要是动态的。

终于在这里得到答案 

<script id="template" type="text/x-jquery-tmpl">
        <li>{Need Loop here?}</li>           
 </script>

var invoice = {
  invoiceItems: [
    { type: 'item', 
      part: '99Designs', description: '99 Designs Logo', 
      price: 450.00, qty: 1 },
    { type: 'service',
      service: 'Web development and testing', 
      price: 25000.00 },
    { type: 'item',
      part: 'LinodeMonthly', description: 'Monthly site hosting', 
      price: 40.00, qty: 12 }
  ]
};

$("#template")
    .tmpl(invoice.invoiceItems)
    .appendTo("#place_holder");

另外，有什么方法可以显示 json 属性名称吗？像：

类型 > 零件 > 描述 > .....

这是jsFiddle

更新：

我开始使用Jsrender，速度要快得多。我还没有弄清楚如何创建动态模板。完成后会更新。

4

4 回答 4

2

终于得到了朋友的帮助。

模板

<script id="template" type="text/x-jquery-tmpl">
{{each(i, invoiceItem) invoiceItems}}
    <li>
    {{each(j, property) $item.getProperties(invoiceItem) }}
       ${invoiceItem[property]} >>
    {{/each}}
    </li>
{{/each}}
</script>

辅助函数

var functionHelpers = {
getProperties: function(invoiceItem) {
    var properties = [];

    for(var key in invoiceItem) {
        properties.push(key);
    }

    return properties;
}

};

这是工作示例jsFiddle

于 2012-01-25T16:57:33.837 回答
1

jQuery 模板已不复存在：

http://weblogs.asp.net/stevewellens/archive/2011/12/01/goodby-jquery-templates-hello-jsrender.aspx

于 2012-01-24T22:51:48.647 回答
0

我不确定你为什么认为你需要循环，jquery.tmpl 正在为你做循环。您只需要使用${}在您想要的标记中输出数据：jsfiddle。

于 2012-01-24T23:02:52.703 回答
0

我会选择：Angular。

您获得的不仅仅是模板渲染（您还可以使您的模板更加动态），而且您还可以获得在大多数情况下非常受欢迎的双向数据绑定。

于 2013-05-10T06:33:34.710 回答