Question

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

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

终于得到了答案 Here

<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属性名称？像：

type＆gt;部分＆gt;描述＆GT; .....

这是jsFiddle

更新：

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

Answer 1

最后得到了我朋友的帮助。

模板

<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

Answer 2

jQuery模板已不复存在：

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

Answer 3

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

Answer 4

我会选择：Angular。

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

jQuery模板/ tmpl如何从json构建动态输出？

4 个答案: