Meteor 空格键是如何工作的？

我不明白空格键

{{{#each}}

模板标记会发生什么情况。
例如，我有一个简单的事件代码：

'click #player': function(){
  var playerId = this._id;
  Session.set('selectedPlayer', playerId);
  Session.set('selectedPlayerName', this.name);
}

以及模板中相应的代码：

{{#each player}}
    <a href="#" id="player" class="{{selectedClass}}"></a>
{{/each}}

---

事件处理程序和助手函数如何知道引用了哪些列表项？

在Meteor中，您已经获得了创建的所有模板。每次呈现模板时，都会给它一个数据上下文，这是一种奇特的说法，表示它创建了一个新的功能范围。该数据上下文存储在

templateInstance（）.data

中

当您使用

#each

时，您将为其中的任何内容创建一个新的数据上下文。您可以通过将

console.log（this）

放在您的助手的返回上方来检查这一点

在

onCreated

、

onstroed

和

onRendered

中，

此

指向

模板安装（）。因此，无论何时在回调中，都可以使用
this.data
访问数据上下文

在
事件
回调中，您有两个参数：
事件，模板
。这里，
template
也指向
templateInstance（）

在助手中，
this
指向
templateInstance（）.data
，因此您只需调用
this

空格键不是魔法，它只是让JS看起来像HTML的一种方法。假设您的模板存储在
视图/templates.html
中，请查看
.meteor/local/build/programs/web.browser/app/client/views/template.templates.html
，这一切都是有意义的
 在Meteor中，您拥有所有创建的模板。每次呈现模板时，都会给它一个数据上下文，这是一种奇特的说法，表示它创建了一个新的功能范围。该数据上下文存储在
templateInstance（）.data
中

当您使用
#each
时，您将为其中的任何内容创建一个新的数据上下文。您可以通过将
console.log（this）
放在您的助手的返回上方来检查这一点

在
onCreated
、
onstroed
和
onRendered
中，
此
指向
模板安装（）。因此，无论何时在回调中，都可以使用
this.data
访问数据上下文

在
事件
回调中，您有两个参数：
事件，模板
。这里，
template
也指向
templateInstance（）

在助手中，
this
指向
templateInstance（）.data
，因此您只需调用
this

空格键不是魔法，它只是让JS看起来像HTML的一种方法。假设您的模板存储在
视图/templates.html
中，请查看
.meteor/local/build/programs/web.browser/app/client/views/template.templates.html
，这一切都是有意义的
 的特殊之处在于它改变了它的内部上下文。

事实上，每个模板都可以与一包数据（例如文章的标题和内容）一起使用。此数据包在模板的自己的上下文中注册，可以在helpers中使用
This.someData
引用，也可以在模板中简单命名（
{{someData}
）

其他模板标记，如
{{{#if}}
不会更改它们内部模板的上下文。您可以在博客文章模板中键入以下内容，该模板将博客文章对象作为数据接收：

<h3>{{title}}</h3>
<p>{{content}}</p>

{{#if userIsSecretAgent}}
  <blink>{{secretData}}</blink>
{{/if}}

{{{#each}}
块中的上下文与父块不同，而是一篇博客文章，我们可以简单地通过它们的名称引用每个博客文章字段

但现在我们在重复代码。重用我们以前的模板不是很好吗

{{#each blogPosts}}
  {{> blogPost}}
{{/each}}

blogPost
模板需要一个blogPost对象作为它的上下文，我们为这个上下文提供了
{{each}
模板标记

助手的工作方式相同，只是您必须在其内部键入
this.title
或
this.content
。您还必须在某些位置使用来引用模板（而不是
this
）

有关更多魔法，请参阅。
的特殊之处在于它改变了其内部上下文。

事实上，每个模板都可以与一包数据（例如文章的标题和内容）一起使用。此数据包在模板的自己的上下文中注册，可以在helpers中使用
This.someData
引用，也可以在模板中简单命名（
{{someData}
）

其他模板标记，如
{{{#if}}
不会更改它们内部模板的上下文。您可以在博客文章模板中键入以下内容，该模板将博客文章对象作为数据接收：

<h3>{{title}}</h3>
<p>{{content}}</p>

{{#if userIsSecretAgent}}
  <blink>{{secretData}}</blink>
{{/if}}

{{{#each}}
块中的上下文与父块不同，而是一篇博客文章，我们可以简单地通过它们的名称引用每个博客文章字段

但现在我们在重复代码。重用我们以前的模板不是很好吗

{{#each blogPosts}}
  {{> blogPost}}
{{/each}}

blogPost
模板需要一个blogPost对象作为它的上下文，我们为这个上下文提供了
{{each}
模板标记

助手的工作方式相同，只是您必须在其内部键入
this.title
或
this.content
。您还必须在某些位置使用来引用模板（而不是
this
）

有关更多魔法，请参阅。
由于多个元素具有相同的
id
-属性，因此由此生成的HTML无效。事件处理程序很容易解释。内部的键分为
事件类型
和可选的
事件目标
。
事件目标
被传递给jQuery，jQuery允许无效使用
id
s。因此jQuery将事件监听器添加到id为
player
的所有元素中

由于多个元素具有相同的
id
-属性，因此由此生成的HTML无效。电动汽车