小鬍子動態設置變量

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) { 
 
\t case "www.google.com/something1": 
 
\t \t finalJSONobject = "enchiladas"; 
 
\t \t break; 
 
\t case "www.google.com/something2": 
 
\t \t finalJSONobject = "roastchicken"; 
 
\t \t break; 
 
\t case "www.google.com/something3": 
 
\t \t finalJSONobject = "salmon"; 
 
\t \t break; 
 
\t 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); 
 
    \t \t \t 
 
// inject template to DOM 
 
carousel.html(rendered);

現在它運行良好，當我使用{{} #enchiladas } {{/ enchiladas}} ...但這不是我想要的。我希望能夠使用變量名稱而不是enchiladas。

如果你看看我的switch語句...它會返回finalJSONobject作爲字符串。我想讓我的模板看起來像

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

但這不起作用。小鬍子模板使用jsonData.recipemodules作爲其數據。因此，jsonData.recipemodules.enchiladas將工作...但我想動態設置「enchiladas」，這是設置在我的switch語句。我想在模板中使用我的動態設置變量。我想使用jsonData.recipemodules.finalJSONobject，以便基於頁面...我看我想要的數據。

請幫幫我！非常感謝。

Konstantin

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);