javascript - Mustache 动态设置变量

Question

我需要帮助来使用动态设置的 JavaScript 变量作为我的 Mustache 模板变量。问题就在这里。我的 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:
}

最后...这是我的 mustache 模板的样子

// 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}}{{/enchiladas}} 时，它运行良好......但这不是我想要的。我希望能够使用变量名而不是辣酱 Jade 米饼馅。

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

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

但这不起作用。 Mustache 模板使用 jsonData.recipemodules 作为其数据。因此 jsonData.recipemodules.enchiladas 会起作用...但我想动态设置在我的 switch 语句上设置的“enchiladas”。我想在模板中使用动态设置的变量。我想使用 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);