模板中的 Meteor 数据上下文与助手

Question

试图更好地理解数据上下文在 Meteor 中的工作方式，因为我无法弄清楚我面临的这个问题。在任何地方都没有找到明确的答案。我有以下模板

<template name="list">
  {{#each listItem}}
    {{> listItemDetail}}
  {{/each}}
</template>

<template name="listItemDetail">
  <p>{{_id}} {{title}}</p>
  <p>{{idViaHelper}}</p>
</template>

而在我的 Javascript 我有

Template.list.helpers({
    'listItem': () => {
        return List.find().fetch();
})

Template.listItemDetail.helpers({
    'idViaHelper': () => {
        return this._id
})

就我对 Meteor 中数据上下文的理解而言，使用 #each 将 listItemDetail 模板的每个实例的上下文设置为从 listItem 助手.

当涉及到在 listItemDetail 模板中使用 {{_id}} 时，这正如我所期望的那样工作，显示了文档的 ID。

但是如果我尝试通过使用 this._id 的助手 {{idViaHelper}} 获得相同的 _id，我会得到 undefined。当我尝试 console.log(this) 时，它显示 this 指的是 Window 对象。但我不知道为什么。发生了什么，为什么模板助手没有获取数据上下文？

这是我的第一个post，感谢您的帮助！

Answer 1

关于 Meteor 数据上下文流，您是正确的。你正在做的是工作。

你只是忘记了 this 代表什么到 lambda 函数中。

阅读 MDN 中的 Lexical this 部分，它的解释比我能说的更好：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

对于您的情况，直接从 this on helpers 获取数据上下文的更简单方法是通过通常的匿名函数传递。

试一试：

Template.listItemDetail.helpers({
    'idViaHelper': function(){
        return this._id
})

就是这样。

你运气不好，这里没有与 Meteor 相关的问题。

您可能会发现有用的其他相关问题：

Answer 2

Julien Leray 关于词汇 this 的回答是正确的。使用 lambda 表达式时，您会丢失数据上下文。但是，Meteor 为您提供了无需词法 this 即可访问模板数据的方法，即：

Template.list.helpers({
  'listItem': () => List.find().fetch();
});

Template.listItemDetail.helpers({
  'idViaHelper': () => Template.currentData()._id
});

您可以同时使用 Template.currentData() 和 Template.instance().data。

此外，请注意，如果您的 lambda 表达式仅包含一个 return 语句，您可以像我上面那样使用快捷语法。

// ECMAScript 5
var myFunc = function (a, b, c) {
  return b * a - c;
};

变为：

// ECMAScript 6
const myFunc = (a, b, c) => b * a - c;

模板中的 Meteor 数据上下文与助手

Meteor data context within templates vs helpers

templates

helpers

meteor