Шаблон JQuery / TMPL, как построить динамический вывод из JSON? - PullRequest
Новая
       42

Шаблон JQuery / TMPL, как построить динамический вывод из JSON?

0 голосов
/ 25 января 2012

Попытка построить динамический вывод из 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?Как:

type> part> description> .....

Вот jsFiddle

Обновление :

Я начинаю использовать Jsrender , гораздо быстрее.Я до сих пор не понял, как создавать динамические шаблоны.Обновится, если будет завершено.

Ответы [ 4 ]

2 голосов
/ 25 января 2012

Наконец-то получила помощь от моего друга.

Template 

<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

1 голос
/ 25 января 2012
0 голосов
/ 10 мая 2013

Я бы пошел на: Угловой .

Вы получаете больше, чем просто рендеринг шаблонов (вы также можете сделать ваши шаблоны более динамичными), но вы также получаете двустороннюю привязку данных, которая в большинстве случаев очень приветствуется.

0 голосов
/ 25 января 2012

Я не уверен, почему вы думаете, что вам нужен цикл, jquery.tmpl делает цикл за вас. Вам просто нужно использовать ${} для вывода данных в нужной разметке: jsfiddle .

...