小胡子动态设置变量

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

最后...这是我的 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);

现在当我使用 {{#enchiladas}}{{/enchiladas}} 时它运行良好......但这不是我想要的。我希望能够使用变量名而不是辣酱玉米饼馅。

如果您查看我的 switch 语句...它 returns 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);

小胡子动态设置变量

Mustache Dynamically set variable

javascript

mustache