简单的嵌套车把foeach不起作用

时间:2016-09-22 17:39:51

标签: javascript express handlebars.js

这是在节点中。

   app.get('/payees', function(req, res)
   {
     var categoriesPromise = Category.getAllCategories();
     var payeesWhereNullPromise = categoriesPromise.then(function() {
        return Payee.getAllPayeesWhere({categoryId:null})
    })
    payeesWhereNullPromise.then(function(payees) {
        var categories = categoriesPromise.value();
        res.render('payees', {categories: categories, subcategories: [], payees:payees});
    })
});

这是在前端

{{#each payees as |payee|}}
    {{#each categories as |category|}}
            category.name
    {{/each}}
{{/each}}

如果我单独完成它们,它们可以完美地工作,但是当我将它们放在彼此内部的那一刻没有任何反应。

1 个答案:

答案 0 :(得分:1)

您只能访问#each中正在循环的数组的属性。使用示例中的嵌套foreach,您会遇到Handlebars尝试在categories数组中查找payees作为对象属性的问题。但在你的情况下,categories是一个全局变量,因此无法找到。

但你可以使用Handlebars助手功能做你想做的事。

编辑:以下是使用车把辅助功能的示例。

模板:

 {{#list categories payees}}{{/list}}

节点服务器代码:

var hbs = require('hbs');
hbs.registerHelper('list', function(categories, payees, options) {
   var out = "";
   // Here you can use standard JavaScript to do whatever you want.
   // Also nested loops are possible.
   // Put the wished HTML into the out variable and it will get rendered 
   // in your template.
   for (var i = 0; i < categories.length; i++) {
      out += "<div>"+categories[i]+"</div>";
      for (var j = 0; j < payees.length; j++) {
      // and so on
      }
   }
   return out;
});

文件:https://github.com/pillarjs/hbs http://handlebarsjs.com/