mustache - render entire data structure
Is there some way to render all the literal objects and the literal objects within them using mustache? Being a neophyte at this I wondered if the following would work...
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["开发者_如何学Goaux2"] ={"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);
but of course it doesn't. I get
{{/.}}
Since the goal was to use mustache, here's the final deal using mustache to expand the array. I don't know if Jesse meant to put embedded literal objects in tables within table or not but that was not my goal. I deleted wrap and all from the function in this version as I either didn't need them or understand why they were there. I remain indebted to Jesse for this hint; I doubt I would have come up with anything so clever.
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);
Seems like you could just make a recursive function for this - mustache is pretty static, but recursion is perfect for looking up all the nodes in a deep object.
Untested hypothetical code:
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);
The following works. It doesn't use mustache facilities at all. I plan to change it so that it uses mustache's iteration on the array.
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;
}
精彩评论