流星:什么是"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
..........
..........
我假设你知道 helpers
和 events
的概念。
在上面的代码片段中,一般来说 {{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._id
:this
表示data context
。
this
将为您提供助手作为输入显示的数据。
例如,如果您点击 First Post
旁边的删除按钮,那么在事件中它将为您提供以下数据 this
:
{name: "First post", _id: "xxx", ......},
因为这是显示该内容时可用的数据上下文。
点击second post
旁边的按钮也是一样:
{name: "Second post", _id: "yyy", ......},
helpers
也是如此。
我希望这至少能对外面的人有所帮助。
数据上下文可以是以下三种情况之一:(除非我遗漏了一些)
- 一个游标,即
Collection.find()
的结果
- 一个对象数组,即只是一些数组或
Collection.find().fetch()
的结果
- 单个对象,即
{ _id: "123", name: "Orthoclase E. Feldspar" }
{{#each foo}}
遍历游标或数组上下文并将上下文更改为单个对象。 {{#with bar}}
只是说要使用哪个助手(在本例中 bar)来设置数据上下文。
在开发过程中,尤其是在学习 Meteor 的过程中,将 console.log(this)
放在帮助代码的顶部有助于仔细检查数据上下文是什么。就是这个.
刚刚从 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
..........
..........
我假设你知道 helpers
和 events
的概念。
在上面的代码片段中,一般来说 {{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._id
:this
表示data context
。
this
将为您提供助手作为输入显示的数据。
例如,如果您点击 First Post
旁边的删除按钮,那么在事件中它将为您提供以下数据 this
:
{name: "First post", _id: "xxx", ......},
因为这是显示该内容时可用的数据上下文。
点击second post
旁边的按钮也是一样:
{name: "Second post", _id: "yyy", ......},
helpers
也是如此。
我希望这至少能对外面的人有所帮助。
数据上下文可以是以下三种情况之一:(除非我遗漏了一些)
- 一个游标,即
Collection.find()
的结果
- 一个对象数组,即只是一些数组或
Collection.find().fetch()
的结果
- 单个对象,即
{ _id: "123", name: "Orthoclase E. Feldspar" }
{{#each foo}}
遍历游标或数组上下文并将上下文更改为单个对象。 {{#with bar}}
只是说要使用哪个助手(在本例中 bar)来设置数据上下文。
在开发过程中,尤其是在学习 Meteor 的过程中,将 console.log(this)
放在帮助代码的顶部有助于仔细检查数据上下文是什么。就是这个.