jQuery模板/ tmpl如何從json構建動態輸出？

嘗試從json構建動態輸出並使用jq/template tmpl顯示行/列。不知何故，我需要迭代通過列和行不知道如何。jQuery模板/ tmpl如何從json構建動態輸出？

我做不知道 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屬性名？像：

類型>部分>的說明> .....

這裏的jsFiddle

更新：

我開始使用Jsrender，要快得多。我仍然沒有弄清楚如何創建動態模板。如果完成，將會更新。

來源

2012-01-24 pyccki

http://api.jquery.com/template-tag-each/ –

終於得到了我的朋友的幫助。

模板

<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-25 16:57:33 pyccki

來源

2012-01-24 22:51:48

Thanx Steve，但我想使用jquery tmpl。 :( – pyccki

來自他們的網站：jQuery模板插件注意：jQuery團隊已決定不將此插件過去測試版，它不再被積極開發或維護 –

我不知道爲什麼你認爲你需要循環，jquery.tmpl爲你做的循環。你只需要使用${}來輸出你想要的標記中的數據：jsfiddle。

來源

2012-01-24 23:02:52 Jesse

問題是我不知道json Prop名稱， json將被動態構建 – pyccki

你的意思是你想鏈接到各種json結構嗎？ –

@ Steve，我真的不想創建5-20個不同的模板，我正在尋找一種方式來構建 – pyccki

我會去的：Angular。

您不僅僅獲得了模板渲染（您還可以使模板更具動態性），但是您還可以獲得雙向數據綁定，這在大多數情況下非常受歡迎。

來源

2013-05-10 06:33:34 Roland

需要檢查jsRender的性能。我的主要問題，我有數據的大量渲染:) 下面是一些逆足測試jsRender http://borismoore.github.io/jsrender/test/perf-compare.html – pyccki

jQuery模板/ tmpl如何從json構建動態輸出？

回答

相關問題