小胡子-呈現整個數據結構

Question

有沒有辦法用胡子渲染所有文字對象和其中的文字對象？ 作為一名新手，我想知道以下方法是否可行...

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);

但當然不是。 我懂了

{{/。}}

Answer 1

由於目標是使用胡須，因此這是使用胡須擴展陣列的最后方法。 我不知道Jesse是否打算將嵌入式文字對象放在表內的表中，但這不是我的目標。 在此版本中，我從功能中刪除了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);

Answer 2

似乎您可以為此創建一個遞歸函數-胡子是相當靜態的，但是遞歸對於查找深層對象中的所有節點來說是完美的。

未經測試的假設代碼：

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);

Answer 3

以下作品。 它根本不使用胡須設施。 我計划對其進行更改，以使其在數組上使用胡須的迭代。

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;
}