Mustache动态设置变量

Question

我需要帮助使用动态设置的javascript变量作为我的胡子模板变量。问题来了。我的JSON看起来像这个

jsonData = {
"recipemodules" : {
"enchiladas" : [
{
"title" : "Chicken Enchiladas",
"thumbnailurl" : "http:www.google.com/image",
"recipelink" : "location to recipe",
"credit" : "some credit"
},
{
"title" : "Chicken Enchiladas",
"thumbnailurl" : "http:www.google.com/image",
"recipelink" : "location to recipe",
"credit" : "some credit"
}
],
"roastchicken" : [
{
"title" : "Chicken Enchiladas",
"thumbnailurl" : "http:www.google.com/image",
"recipelink" : "location to recipe",
"credit" : "some credit"
},
{
"title" : "Chicken Enchiladas",
"thumbnailurl" : "http:www.google.com/image",
"recipelink" : "location to recipe",
"credit" : "some credit"
}
],
"salmon" : [
{
"title" : "salmon ",
"thumbnailurl" : "http:www.google.com/image",
"recipelink" : "location to recipe",
"credit" : "some credit"
},
{
"title" : "Chicken Enchiladas",
"thumbnailurl" : "http:www.google.com/image",
"recipelink" : "location to recipe",
"credit" : "some credit"
}
]
}

}；

然后我接下来要做的是…去一个网页。。。抓取URL并基于该URL，我设置了一个变量。

var theCurrentURL = window.location.href;
var finalJSONobject = "";
switch(theCurrentURL) {
	case "www.google.com/something1":
		finalJSONobject = "enchiladas";
		break;
	case "www.google.com/something2":
		finalJSONobject = "roastchicken";
		break;
	case "www.google.com/something3":
		finalJSONobject = "salmon";
		break;
	default:
}

最后。。。这是我的糊状模板看起来像

// create template
template = '{{#enchiladas}}<div class="mri-container"><img src="{{thumbnailurl}}" /></div>{{/enchiladas}}';
// parse template
Mustache.parse(template);
// render template
rendered = Mustache.render(template, jsonData.recipemodules);
			  
// inject template to DOM
carousel.html(rendered);

现在，当我使用{{#enchiladas}}{{/enchildas}}时，它运行良好。。。但这不是我想要的。我希望能够使用变量名而不是enchiladas。

如果你看看我的switch语句。。。它以字符串形式返回finalJSONobject。我希望我的模板看起来像

template = '{{#finalJSONobject}}<div class="mri-container"><img src="{{thumbnailurl}}" /></div>{{/finalJSONobject}}';

但这并不奏效。胡子模板使用jsonData.recipemodules作为其数据。因此，jsonData.recipemodules.enchiladas将起作用。。。但是我想动态地设置"enchiladas"，它是在我的switch语句中设置的。我想在模板中使用我的动态设置变量。我想使用jsonData.recipemodules.finalJSONobject，以便基于页面。。。我查找我想要的数据。

请帮帮我！非常感谢。

康斯坦丁

Answer 1

我认为你在这里看错了方向。如果您希望最后一个模板工作，您可以将另一个变量传递给render而不是jsonData.recipemodules
举例说明：

// jsonData definition before this
var theCurrentURL = window.location.href;
var templateData = {};
switch(theCurrentURL) {
case "www.google.com/something1":
templateData.finalJSONobject = jsonData.recipeModules["enchiladas"];
break;
case "www.google.com/something2":
templateData.finalJSONobject = jsonData.recipeModules["roastchicken"];
break;
case "www.google.com/something3":
templateData.finalJSONobject = jsonData.recipeModules["salmon"];
break;
default:
}
// create template
template = '{{#finalJSONobject}}<div class="mri-container"><img src="{{thumbnailurl}}" /></div>{{/finalJSONobject}}';
// parse template
Mustache.parse(template);
// render template
rendered = Mustache.render(template, templateData);
// inject template to DOM
carousel.html(rendered);