Javascript mustache-渲染整个数据结构

是否有某种方法可以使用Mustach渲染所有文字对象以及其中的文字对象？作为一个新手，我想知道下面的方法是否可行

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

var data2={}；
数据2[“收集器”]={“sname”：“收集器”，“lname”：“收集器”，“V”：[11,12,13,14,15]}；
数据2[“存储”]={“sname”：“存储”，“lname”：“存储”，“V”：[21,22,23,24,25]}；
数据2[“aux1”]={“sname”：“aux1”，“lname”：“Loop High”，“V”：[31,32,33,34,35]}；
数据2[“aux2”]={“sname”：“aux2”，“lname”：“Loop Low”，“V”：[41,42,43,44,45]}；
数据2[“aux3”]={“sname”：“aux3”，“lname”：“aux3”，“V”：[51,52,53,54,55]}；
数据2[“aux4”]={“sname”：“aux4”，“lname”：“aux4”，“V”：[61,62,63,64,65]}；
var T2=“”+
"{{#.}}"                       +
"{{#.}}"                      +
"{{.}}"          +
"{{/.}}"                      +
""                       +
"{{/.}}"                           +
""
html=胡须。到_html（T2，数据2）；

但当然不是。我明白了

---

{{/}

似乎您可以为此创建一个递归函数-Mustach是相当静态的，但递归非常适合查找深层对象中的所有节点

未经测试的假设代码：

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

var data2={}；
数据2[“收集器”]={“sname”：“收集器”，“lname”：“收集器”，“V”：[11,12,13,14,15]}；
数据2[“存储”]={“sname”：“存储”，“lname”：“存储”，“V”：[21,22,23,24,25]}；
数据2[“aux1”]={“sname”：“aux1”，“lname”：“Loop High”，“V”：[31,32,33,34,35]}；
数据2[“aux2”]={“sname”：“aux2”，“lname”：“Loop Low”，“V”：[41,42,43,44,45]}；
数据2[“aux3”]={“sname”：“aux3”，“lname”：“aux3”，“V”：[51,52,53,54,55]}；
数据2[“aux4”]={“sname”：“aux4”，“lname”：“aux4”，“V”：[61,62,63,64,65]}；
var getMustache=函数（数据、换行、全部、深度）{
var r=“”；
变量深度=深度| | 0；
for（数据中的var d）{
if（数据hasOwnProperty（d））{
r+=”；
if（数据[d]。长度）{
r+=“{{{#“+d+”}”；
r++=getMustache（数据[d]，换行，全部，深度++）；
r+=“{{/”+d+“}}”；
}否则{
r+=“{{{data[d]+“}}”；
}
r+=”；
}
}
返回r；
}
var T2=“”+getMustache（数据2，['tr'，'td'，'span'）；
html=胡须。到_html（T2，数据2）；

以下工作。它根本不使用胡子工具。我计划对其进行更改，以便在阵列上使用Mustach的迭代

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

var getMustache=function（数据、换行、全部、深度）
{
var r=“”；
如果（深度==0）
{
r=r+“”；
}
for（数据中的var d）
{
if（数据hasOwnProperty（d））
{
if（数据类型[d]=“对象”）
{
r+=getMustache（数据[d]，换行，全部，深度+1）；
} 
其他的
{
r++=''+数据[d]+''；
}
}
如果（深度==0）
{
r=r+“”；
}
}
//警报（“r=”+r）；
返回r；
}

因为我们的目标是使用mustache，下面是使用mustache扩展阵列的最终交易。 我不知道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);

var getMustache=函数（数据、深度）
{
var r=“”；
如果（深度==0）
{
r=r+“”；
}
for（数据中的var d）
{
if（数据hasOwnProperty（d））
{
if（数据类型[d]=“对象”）
{
if（data[d].length）//是数组吗？
{
var T=“{{{{}}{{.}{{/“+d+”}}}”；
r+=Mustache.to_html（T，数据）；
}
其他的
{
r+=getMustache（数据[d]，深度+1）；
}
} 
其他的
{
r++=''+数据[d]+''；
}
}
如果（深度==0）
{
r=r+“”；
}
}
返回r；
}
var T2=“”+getMustache（数据2,0）+”；
html=胡须。到_html（T2，数据2）；
document.write（html）；

谢谢。我试过了，但有一些问题。我认为行“if（data[d].length（））{”失败，因为数据[d]不是字符串，而是文本对象。我认为您正在尝试找出数据[d]Jesse：我非常感谢你的回答。我不明白为什么上面的内容会迭代文本和数组，并显式地命名它们；它似乎应该迭代并使用{{}或者说出它们的名字，但不能同时说出两者。到目前为止，我试图解决这个问题，但成功率有限。如果我让它起作用，我会把它发布到这里。我认为If（data[d].length（）…应该是If（typeof data[d]=“object”），哎呀，长度不是一个方法，它是一个属性-所以

data[d].length应该在那里-抱歉，我根本没有测试它：PYou可以通过检查数据[d]来确定var是否是数组.length。但就使用Mustach处理数组而言，必须构造模板并使用模板来扩展数组。由于jscript代码已经存在，因此这样做几乎没有任何意义。Mustach似乎对构造html以将此文本对象转换为一张桌子-(