在Express应用程序中动态填充模态

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

---

---

根据nanoamps的回答，并略微修改，我现在有一个单独的模板文件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中传递索引。

虽然这应该有用，但对集合的任何更改都会导致错误的配方。通过在初始表行中的某处（例如，作为_id属性）在某处呈现MongoDB的唯一data-id标识符来构建，并将其用作您查找并通过点击处理程序的事物并要求。然后单个配方路径可以查找数据库中的单个记录，而不是加载整个集合。它会更快，线下数据更少，而且更不易碎。