在快速应用程序中动态填充模态

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 属性）并将其用作您查找并通过您的点击处理程序和请求的内容，以此为基础。然后单个配方路由可以在数据库中查找单个记录，而不是加载整个集合。它会更快，传输的数据更少，更不脆弱。