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 ，因为我不需要它们或理解它们为什么存在。我仍然感谢Jesse的这一暗示;我怀疑我会想出任何如此聪明的东西。

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

小胡子 - 渲染整个数据结构

3 个答案: