流星:什么是"data context"?

Meteor: what is "data context"?

刚刚从 Meteor 开始,然后通过 Matthew Platts 的 Meteor Tutorial

在本教程中,以及官方Meteor Documentation中,有很多地方提到了data context的概念],但我似乎找不到关于这是什么的清晰定义/解释(带示例)。

例如,在2.4.3 Rendering Data with Helpers部分,我们读到:

Notice that inside of the #each block we go {{name}}, even though we have no name helper defined. This is because the data context changes inside the #each block. We loop through each item in the teams array, and since each item has a “name” attribute Meteor will automatically create a {{ name }} helper.

更新:实际上,只要通读本节的末尾,作者就推荐了一个使事情变得非常清楚的资源:A Guide to Meteor Templates & Data Contexts。虽然仍然没有准确的定义。

那么,在 Meteor 中,数据上下文到底是什么?

这个不好解释。像你一样,我在教程中使用了它而不知道它。经过一些研究,我找到了最好的解释,视觉解释。您可以查看有关 "Templates & Data Contexts" 的 Discover Meteor 文章。希望它能澄清你的想法。

我会尽我所能解释,如果我错了请纠正我。

我将使用以下代码段进行解释:

<template name="posts">
  {{#each posts}}
    <p>{{name}}</p>
  {{/each}}
</template>

我们假设它将显示博客中所有 post 的名字:

First Post
Second post
Third post
..........
..........

我假设你知道 helpersevents 的概念。

在上面的代码片段中,一般来说 {{name}},meteor 在 helpers:

中搜索名为 name 的 helper
Template.posts.helpers({
  name: function(){
   return "dummy text";
  }
});

如果找到任何帮助程序,它会运行该帮助程序并显示该值。

所以在这里,它输出:

dummy text
dummy text
dummy text
...........

但是如果它没有找到任何助手,它将在 data context 中搜索。

让我们假设 posts 我们返回一些数据:

   Template.posts.helpers({
      posts: function(){
       return Posts.find().fetch();
      }
    });

我们发送给 posts 助手的数据如下所示:

{name: "First post", _id: "xxx", ......},
{name: "Second post", _id: "yyy", ......}
{name: "Third post", _id: "zzz", ......}
.................

{{#each posts}} 的代码中,它遍历每个对象并显示 name property("First Post","Second Post,"Third Post")

因为没有找到name的helper所以显示name property,然后在当前的data context中查找,发现同名的属性 name 并显示。

助手和事件中的数据上下文

让我们使用相同的片段并添加一个 delete 按钮:

<template name="posts">
      {{#each posts}}
        <p>{{name}}</p>
       <button>Delete Post</button>
      {{/each}}
    </template>

显示如下:

First Post <Delete Post>
Second post <Delete Post>
Third post <Delete Post>
..........
..........

在活动中:

Template.posts.events({
  'click button': function(){
     console.log(this)
    Posts.remove({_id: this._id });
  }
})

在这里,当你点击任何删除按钮时,它会删除相应的post。

这里我们使用this._idthis表示data context

this 将为您提供助手作为输入显示的数据。

例如,如果您点击 First Post 旁边的删除按钮,那么在事件中它将为您提供以下数据 this:

{name: "First post", _id: "xxx", ......},

因为这是显示该内容时可用的数据上下文。

点击second post旁边的按钮也是一样:

{name: "Second post", _id: "yyy", ......},

helpers也是如此。

我希望这至少能对外面的人有所帮助。

数据上下文可以是以下三种情况之一:(除非我遗漏了一些)

  1. 一个游标,即Collection.find()
  2. 的结果
  3. 一个对象数组,即只是一些数组或Collection.find().fetch()
  4. 的结果
  5. 单个对象,即{ _id: "123", name: "Orthoclase E. Feldspar" }

{{#each foo}} 遍历游标或数组上下文并将上下文更改为单个对象。 {{#with bar}} 只是说要使用哪个助手(在本例中 bar)来设置数据上下文。

在开发过程中,尤其是在学习 Meteor 的过程中,将 console.log(this) 放在帮助代码的顶部有助于仔细检查数据上下文是什么。就是这个.