Question

我正在尝试从调用REST API获取数据，并使用Handlebars将其呈现为列表，Handlebars是我在Node Express应用程序中的视图引擎

这是我的路线：

router.get('api/projects', function(req, res){

    Project.find(function(err, projects){
        if(err)
            res.send(err);

        console.log(projects);

        res.render('list-view', projects);
    });
});

“projects”JSON数组包含具有Name和_id键的不同项目

这是我在list-view.hbs上的html：

{{#each .}}

<div class="thumbnail">
  <div class="caption">
    <h5> Name: {{name}} </h5>
  </div>
</div>

{{/each}}

出于某种原因，我的列表视图页面将按计划在列表中呈现项目，但随后将在列表末尾显示一些空项目。我无法弄清楚为什么。所以说我的项目数组中有8个项目...我的页面将正确渲染所有8个，但总共11个，因为最后几个是空的。我使用console.log（项目）来验证数组中只有8个项目。关于为什么我得到额外的任何想法？

Answer 1

我想出了如何解决这个问题。项目json Array需要作为单个对象传递给把手：

router.get('/api/projects', function(req, res){

    Project.find(function(err, projects){
        if(err)
            res.send(err);
        res.render('list-view', {projects: projects});
    });
});

然后我的#each助手看起来像这样：

    {{#each projects}}
    <div class="thumbnail">
      <div class="caption">
       <h5> Name: {{name}} </h5>
      </div>
    </div>
    {{/each}}

现在列表正确呈现。

Answer 2

关于接受的答案，

拥有

bar: function() { console.log("this--->", this); return this.x; }在您的JavaScript和
res.render('list-view', {projects: projects})在您的车把模板中

等同于拥有

{{#each projects}}在您的JavaScript和
res.render('list-view', projects)或{{#each .}}在您的车把模板中。

您的问题可能是您要从包含所有可序列化属性的API传递对象。

尝试使用此代替：

{{#each this}}

res.render('list-view', projects.get());仅返回我们关注的数组。

Handlebars在Node Express应用程序中从json数组渲染额外的空对象

2 个答案: