在Express App中動態填充模式

Question

我正在寫一個快遞應用程序，它將允許某人創建一個食譜（烹飪食譜），然后將其保存到mongodb中。 當他們打開應用程序時，他們可以查看食譜列表，對其進行編輯，將其刪除等。

像這樣將食譜存儲在mongo中

> db.recipes.find()
{ "_id" : ObjectId("542fc7d635ebd51b8afd507b"), "name" : "chili", 
  "ingredients" : [ 
    { "ingredient" :     "mince", "quantity" : "500", "unit" : "g" }, 
    { "ingredient" : "cumin", "quantity" : "1", "unit" : "tsp" }, 
    { "ingredient" : "paprika", "quantity" : "2", "unit" : "tsp" } ] 
}
{ "_id" : ObjectId("542fccbb6de6181f8da58346"), "name" : "test", 
  "ingredients" : [ 
    { "ingredient" : "stuff", "quantity" : "10", "unit" : "g" }, 
    { "ingredient" : "stuff", "quantity" : "10", "unit" : "g" } ] 
}

每當查看“食譜”頁面時，都會從數據庫中讀取數據庫

router.get('/recipes', function(req, res) {
  db.collection('recipes').find().toArray(function(err, results) {
    if(results.length > 0) {
      recipes = results;

      for(var i = 0; i < results.length; i++) {
        recipeList[i] = results[i].name;
      }

      res.render('recipes', {recipes: recipes, recipeList: recipeList});
    } else {
      recipes = [];

      res.render('recipes', {recipes: recipes, recipeList: recipeList});
    }

  });
});

然后在recipes.jade ，秘訣列出如下

table.table
  thead
    tr
      th Name
  tbody
  - for(var i = 0; i < recipes.length; i++)
    tr
      td= recipes[i].name

當單擊這些配方之一時，將按以下方式啟動模態

script("type=text/javascript").
  $('td').on('click', function() {
    var recipe = $(this).clone().children().remove().end().text();

    $('#myModalLabel.modal-title').html(recipe);
    $('#myModal').modal();
  });

應該列出成分

我很難弄清楚如何在單擊時顯示配方的成分。 我試圖通過在模式中添加此代碼來弄清楚這一點，我知道這是錯誤的，但我不知道要更改什么。

p ingredients
- for(var j = 0; j < recipes.length; j++)
  ul
    li= recipes[j].ingredients[0].ingredient

---

---

遵循納安的回答並稍加修改，我現在有了一個單獨的模板文件singleRecipe.jade

- var theIngredients = recipes[recipeIndex].ingredients;
p ingredients
ul
- for(var j = 0; j < theIngredients.length; j++)
  li= theIngredients[j].quantity + theIngredients[j].unit + ' ' + theIngredients[j].ingredient

因此，單擊配方時，此處理程序將獲取名稱和索引

$('td').on('click', function() {
  var recipeIndex = $(this).parent().index();
  var recipeName = $(this).text();
  $('#myModal .modal-body').load('/singleRecipe/' + recipeIndex, function() {
    $('#myModal').modal();
  });
});

並且app.js的路由處理程序現在是

router.get('/singleRecipe/:d', function(req, res) {
  db.collection('recipes').find().toArray(function(err, results) {
    if(results.length > 0) {
      recipes = results;
      for(var i = 0; i < results.length; i++) {
        recipeList[i] = results[i].name;
      }
      res.render('singleRecipe', {recipes: recipes, recipeIndex: req.params.d});
    } else {
      recipes = [];
      res.render('recipes', {recipes: recipes, recipeList: recipeList});
    }
  });
});

我知道這仍然很混亂，但是它的工作方式如下所示，所以現在我可以開始重構了。

Answer 1

您當前的顯示代碼將遍歷所有配方（使用for j循環），然后打印每種配方的第一個成分（使用.ingredient[0]參考）。

首先找出您在點擊處理程序中選擇的配方，例如：

var recipeIndex = $(this).index();
var recipeName = $(this).text();

然后，您可以使用食譜索引從recipes數組中選擇正確的一個。 您可以在最初的recipes.jade頁面上的某個位置構建一個龐大的列表，使用CSS將其隱藏，然后在需要時克隆到模式中，但這不是非常可擴展的。 最好將各個配方詳細信息的呈現放入具有其自己路線的單獨模板中：

- var theIngredients = recipes[recipeIndex].ingredients;
p ingredients
ul
- for(var j = 0; j < theIngredients.length; j++)
  li= theIngredients[j].quantity + theIngredients[j].unit + ' ' + theIngredients[j].ingredient

這將為給定的索引構建一個配料列表，循環創建帶有串聯配料詳細信息的每個列表項。

然后在點擊處理程序中使用單獨的GET請求將其拉入模態，如下所示：

$('#myModal .modal-body').load('/singleRecipe?index=' + recipeIndex, function() {
  $('#myModal').modal();
});

它將請求您的新模板，並在URL中傳遞索引。

盡管這應該可行，但是對集合的任何更改都會帶來錯誤的配方。 在此基礎上，通過代替將MongoDB的唯一_id標識符呈現在初始表行中的某個位置（例如，作為data-id屬性），並將其用作您查找的對象並通過點擊處理程序和請求。 然后，單個配方路線可以在數據庫中查找單個記錄，而不是加載整個集合。 這樣會更快，傳輸的數據更少，並且變脆。