Массив карт Jquery в шаблон

Question

Массив карт Jquery в шаблон

0

Пример: прикрепленный скрипт: http://jsfiddle.net/UNsDK/26/

У меня есть объект под названием "Карты, заполненные объектами, содержащими массивы". Я не знаю, что будет заголовком индекса, поскольку объект может быть другим для любого пользователя:

 var obj = {'Cards':  {"Pack1":[{"name":"John","color":"red"}],
                       "Pack2":[{"name":"Smith","color":"green"}]}};

В этом массиве Pack1 и Pack2 могут быть разные имена, но внутренний контент согласован.

Поэтому я не могу создать шаблон, как показано ниже:

{{#Cards}}
{{#Pack1}}{{name}} {{color}} {{/Pack1}}
{{#Pack2}}{{name}} {{color}} {{/Pack2}}
..
{{/Cards}}

Так что я пытаюсь сделать это другим способом путем сопоставления данных в массив и и отправки, что в шаблоне, но не работает: и мой взгляд объект теряет индексы моего объекта карт.

var len = $.map(obj.Cards, function(n, i) { return i; }).length;
console.log('Length of Cards object is ' + len);
var view = {};
view["Packs"] =$.map(obj.Cards, function(n, pack_name) { 
    console.log('this is:'+pack_name);
    for (var key in n) { 
        var obj = n[key];
        for (var prop in obj) {
            // important check that this is objects own property 
            // not from prototype prop inherited
            if(obj.hasOwnProperty(prop)) {
                console.log(prop + " = " + obj[prop]);
                return prop = obj[prop];
            }
        }
    }           
}); //end map

var template = '<ul> {{#Packs}} <li>{{id}} : {{name}} -- {{color}} </li> {{/Packs}} </ul>';
var html = Mustache.to_html(template, view);
var json = JSON.stringify(view); 
$('#sampleArea').html(html);

Undermine2k 24 фев. 2014, в 06:57

Источник

Теги:

javascript

jquery

arrays

mustache

1 ответ

Ещё вопросы

Vadim · Accepted Answer · 2014-02-24T04-21-00.000Z

Вы можете конвертировать ваши obj.Cards с карты в массив объектов, содержащих id и data которые были недавно obj.Cards[id]. Это позволит вам использовать вложенные репитеры. В этом случае ваш код может быть примерно таким:

JavaScript

function convert(obj) {
  var data = [],
      item,
      id,
      card,
      i;
  for(id in obj.Cards) {
    if(obj.Cards.hasOwnProperty(id)) {
      card = obj.Cards[id];
      item = {
        id: id,
        data: []
      };
      for(i=0; i<card.length; i++) {
        item.data.push( $.extend({},card[i]) );
      }
      data.push(item);
    }
  }
  return {Cards: data};
}

var obj = {
  "Cards":{
    "Pack1":[{
      "name":"John",
      "color":"red"
    }, {
      "name":"Doe",
      "color":"blue"
    }],
    "Pack2":[{
      "name":"Smith",
      "color":"green"
    }]
  }
};

var template = '{{#Cards}}' +
                 '<div>{{id}}</div>' +
                 '<ul>' +
                   '{{#data}}<li>{{name}}: {{color}}</li>{{/data}}' +
                 '</ul>' +
               '{{/Cards}}';

var model = convert(obj);

$('body').append(Mustache.render(template, model));

JSBin: http://jsbin.com/zujiqoyi/1/edit

привет, это здорово, не могли бы вы объяснить, что: item.data.push( $.extend({},card[i]) ); функция $ .extend делает?
@ Undermine2k $.extend() клонирует card[i] объекта card[i] и расширяет пустой объект вместе с ней. Если вы используете card[i] напрямую, ваш преобразованный объект будет использовать ссылки на card[i] - все изменения в obj.Cards будут отражены в преобразованном объекте и наоборот. Я просто хотел избежать такого случая и создать совершенно новую модель, чтобы избежать неожиданных результатов.