усы - визуализировать всю структуру данных - PullRequest
0 голосов
/ 08 сентября 2011

Есть ли какой-нибудь способ визуализировать все буквальные объекты и буквальные объекты внутри них, используя усы?Будучи новичком в этом, я подумал, сработает ли следующее ...

var data2 = {};
data2["collector"]={"sname":"Collector", "lname":"Collector", "V":[11,12,13,14,15]};
data2["storage"]  ={"sname":"Storage",   "lname":"Storage",   "V":[21,22,23,24,25]};
data2["aux1"]     ={"sname":"Aux1",      "lname":"Loop High", "V":[31,32,33,34,35]};
data2["aux2"]     ={"sname":"Aux2",      "lname":"Loop Low",  "V":[41,42,43,44,45]};
data2["aux3"]     ={"sname":"Aux3",      "lname":"Aux3",      "V":[51,52,53,54,55]};
data2["aux4"]     ={"sname":"Aux4",      "lname":"Aux4",      "V":[61,62,63,64,65]};

var T2 = "<table border='1'>"               +
         "{{#.}}<tr>"                       +
              "{{#.}}"                      +
                  "<td>{{.}}</td>"          +
              "{{/.}}"                      +
              "</tr>"                       +
         "{{/.}}"                           +
         "</table>"

html = Mustache.to_html(T2, data2);

, но, конечно, это не так.Я получаю

{{/.}}

Ответы [ 3 ]

1 голос
/ 08 сентября 2011

Поскольку целью было использовать усы, вот заключительная сделка с использованием усов для расширения массива.Я не знаю, хотел ли Джесси поместить встроенные литеральные объекты в таблицы внутри таблицы или нет, но это не было моей целью.Я удалил wrap и all из функции в этой версии, поскольку они мне либо не нужны, либо я понимаю, почему они там были.Я остаюсь обязанным Джесси за этот намек;Я сомневаюсь, что смог бы придумать что-нибудь такое умное.

var getMustache = function(data, depth)
{

  var r = "";

  if (depth == 0)
  {
    r=r+"<tr>";
  }

  for(var d in data)
  {
    if(data.hasOwnProperty(d))
    {
      if(typeof data[d] =="object")
      {
        if (data[d].length)      // is it an array?
        {
          var T = "{{#" + d + "}}<td>{{.}}</td>{{/" + d + "}}";
          r += Mustache.to_html(T, data);
        }
        else
        {
          r += getMustache(data[d], depth+1);
        }
      } 
      else 
      {
         r += "<td>" + data[d] + "</td>";
      }
    }
    if (depth == 0)
    {
      r=r+"</tr>";
    }
  }
  return r;
}

var T2 = "<table border='1'>" + getMustache(data2,0) + "</table>";

html = Mustache.to_html(T2, data2);

document.write(html);
0 голосов
/ 08 сентября 2011

Следующие работы. Он не использует усы вообще. Я планирую изменить его так, чтобы он использовал итерацию усов в массиве.

var getMustache = function(data, wrap, all, depth)
{

  var r = "";

  if (depth == 0)
  {
    r=r+"<tr>";
  }

  for(var d in data)
  {
    if(data.hasOwnProperty(d))
    {
      if(typeof data[d] =="object")
      {
         r += getMustache(data[d], wrap, all, depth+1);
      } 
      else 
      {
         r += "<td>" + data[d] + "</td>";
      }
    }
    if (depth == 0)
    {
      r=r+"</tr>";
    }
  }

  //alert("r=" + r);

  return r;
}
0 голосов
/ 08 сентября 2011

Похоже, вы могли бы просто сделать для этого рекурсивную функцию - усы довольно статичны, но рекурсия идеально подходит для поиска всех узлов в глубоком объекте.

Неопробованный гипотетический код:

var data2 = {};
data2["collector"]={"sname":"Collector", "lname":"Collector", "V":[11,12,13,14,15]};
data2["storage"]  ={"sname":"Storage",   "lname":"Storage",   "V":[21,22,23,24,25]};
data2["aux1"]     ={"sname":"Aux1",      "lname":"Loop High", "V":[31,32,33,34,35]};
data2["aux2"]     ={"sname":"Aux2",      "lname":"Loop Low",  "V":[41,42,43,44,45]};
data2["aux3"]     ={"sname":"Aux3",      "lname":"Aux3",      "V":[51,52,53,54,55]};
data2["aux4"]     ={"sname":"Aux4",      "lname":"Aux4",      "V":[61,62,63,64,65]};

var getMustache = function(data, wrap, all, depth){
    var r = "";
    var depth = depth || 0;
    for(var d in data){
        if(data.hasOwnProperty(d)){
            r += "<" + wrap[depth] || all + ">";
            if(data[d].length){
                r += "{{#" + d + "}}";
                r += getMustache(data[d], wrap, all, depth ++);
                r += "{{/" + d + "}}";
            } else {
                r += "{{" + data[d] + "}}";
            }
            r += "</" + wrap[depth] || all + ">";
        }
    }
    return r;
}

var T2 = "<table border='1'>" + getMustache(data2,['tr','td'],'span');

html = Mustache.to_html(T2, data2);
...