带有 Meteor 的 Iron 路由器将数据显示到模板答案

【问题标题】：Iron router with Meteor display data to template带有 Meteor 的 Iron 路由器将数据显示到模板
【发布时间】：2017-10-17 05:47:34
【问题描述】：

我正在使用带有 Meteor 的铁路由器（最新版本）。我有一个模板：

<template name="home">
    {{#each products}}
        <p>{{name}}</p>
    {{/each}}
    JJJJJJJJJJJJ
</template>

在lib/router.js:

Router.configure({
   layoutTemplate:'layout'
});

Router.map(function () {
   this.route('home', {
   path:'/',
   template:'home',
   data : function () {
              return Products.find();
          }
   });
});

当我运行该页面时，我看到带有此 JJJJJJJJJJJJ 的空白页面，添加用于测试以查看它是否加载了模板。 Products 集合中有 2 项带有 name。我可以通过 WEB 浏览器控制台读取（选择）、添加、删除该集合的项目，但该集合未在模板中呈现。可能是什么错误？

【问题讨论】：

使用data: 设置模板的上下文，这意味着模板的this 成为您的光标。所以Products.find() 没有products 字段。试试{{#each this}}。

标签： javascript meteor iron-router meteor-blaze

【解决方案1】：

Iron Router 的data 函数为模板设置数据上下文。在您的情况下，您将数据上下文设置为游标，但尝试使用 products 访问游标，它不作为帮助程序存在，无论是全局注册还是在模板本身上注册。

有几种方法可以解决此问题，但我建议让路由器简单地确定要渲染的模板并让模板获取它自己的数据。

调整后的路由器：

Router.map(function () {
  this.route('home', {
    path: '/',
    template: 'home'
  }
);

模板助手：

Template.home.helpers({
  products() {
    return Products.find();
  }
});

或者，您可以在模板中使用this 关键字来访问当前数据上下文：

<template name="home">
  {{#each this}}
    <p>{{name}}</p>
  {{/each}}
  JJJJJJJJJJJJ
</template>

但是，要辨别this 中的内容并不容易，除非您可以通过模板路径跟踪数据流。这也将此模板与此路由紧密耦合，因为路由本身决定了模板的上下文。

【讨论】：

【解决方案2】：

解决方案在lib/router.js，需要像这样设置属性data：

data : function () {
           templateData = {
               products: Products.find()
           };
           return templateData;
       }

，不像以前那样 - return Products.find();。

【讨论】：