小胡子动态设置变量

时间:2015-04-26 01:25:44

标签: javascript mustache

我需要帮助使用动态的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"
        }

    ]
}

};

然后我接下来要做的是...转到网页...抓取网址并根据该网址设置变量。



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




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



// 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);
&#13;
&#13;
&#13;

现在,当我使用{{#chiladas}} {{/ enchiladas}}时它运行正常......但这不是我想要的。我希望能够使用变量名而不是enchiladas。

如果你查看我的switch语句...它将finalJSONobject作为字符串返回。我希望我的模板看起来像

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

但这不起作用。小胡子模板使用jsonData.recipemodules作为其数据。因此jsonData.recipemodules.enchiladas将工作...但我想动态设置&#34; enchiladas&#34;这是在我的switch语句中设置的。我想在模板中使用我的动态设置变量。我想使用jsonData.recipemodules.finalJSONobject,以便基于页面......我看看我想要的数据。

请帮帮我!非常感谢你。

康斯坦丁

1 个答案:

答案 0 :(得分:0)

我认为你在寻找错误的方向。如果您希望上一个模板有效,则可以将另一个变量传递给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);