使用 Iron-Router 模板内的上下文

我无法理解exactlyMeteor 使用 Iron-Router 调用的模板中的上下文可用作我的上下文，以及这些内容如何继承。

以下是我能想到的“我可以在双花括号内引用的内容”的所有潜在来源：

• 内置助手
• Handlebars.registerHelper(...)
• Template.myTemplate.myVar/myHelper = ...
• Template.myTemplate.helpers({ ... })
• data: { ... }内部路线（Router.map）
• 与某件事有关#each?
• 与某件事有关#with?

我是不是忘记了什么？有全局变量吗？

我想我对首先为模板提供上下文的标准方法有点困惑。还有关于控制结构内部发生的事情，例如#each and #with.

如果能得到澄清就太好了！

IronRouter 使用 RouteController.data 的结果作为当前数据上下文来渲染您的模板。

<template name="viewPost">
   <div>
        <h1>{{title}}</h1>
        <p>{{content}}</p>
    </div>
</template>

var PostsController=RouteController.extend({
    template:"viewPost",
    waitOn:function(){
        return Meteor.subscribe("postsById",this.params._id);
    },
    data:function(){
        return Posts.findOne(this.params._id);
    }
});

this.route("viewPost",{
    path:"/posts/:_id",
    controller:PostsController
});

在此示例中，IronRouter 将渲染“viewPost”模板，其中帖子将 this.params._id 作为数据上下文。

首先为模板提供上下文的标准方法是什么？

有2种方法：

{{#with myContext}}
    {{> myTemplate}}
{{/with}}

{{> myTemplate myContext}}

如您所见，#with 控制结构设置当前数据上下文。 #each 结构迭代游标（或数组）并将当前数据上下文设置为当前获取的文档（或当前单元格）。

<template name="postsList">
    {{#each posts}}
        <h1>{{title}}</h1>
    {{/each}}
</template>

Template.postsList.helpers({
    posts:function(){
        // cursor
        return Posts.find();
        // array
        return [{title:"Title 1"},{title:"Title 2"},{title:"Title 3"}];
    }
});

更新：您能否添加有关继承的注释？例如，如果我嵌套了 #each 块，变量会级联吗？

我想出了这个例子：

<template name="parent">
    <ul>
        {{#each parentContexts}}
            {{> child}}
        {{/each}}
    </ul>
</template>

<template name="child">
    <li>
        <ul>
            {{#each childContexts}}
                {{> content}}
                <p>../this.parentProperty = {{../this.parentProperty}}</p>
            {{/each}}
        </ul>
    </li>
</template>

<template name="content">
    <li>
        <p>this.childProperty = {{this.childProperty}}</p>
        <p>this.parentProperty = {{this.parentProperty}}</p>
    </li>
</template>

Template.parent.helpers({
    parentContexts:function(){
        return [{
            parentProperty:"parent 1"
        },{
            parentProperty:"parent 2"
        }];
    }
});

Template.child.helpers({
    childContexts:function(){
        return [{
            childProperty:"child 1"
        },{
            childProperty:"child 2"
        }];
    }
});

如果运行此示例，您会注意到无法访问“content”中的parentProperty，因为默认的#each帮助程序使用提供的新上下文覆盖父数据上下文。

您可以使用以下语法访问嵌套#each 块中的parentProperty：../this.parentProperty，这让人想起UNIX 父目录访问语法。

但是，您不能在“内容”模板中使用此语法，因为它与调用它的嵌套每个结构无关：您只能在实际发生嵌套的模板中使用 ../../parent 语法。

如果我们想要访问内容模板中的parentPropery，我们必须使用父上下文来扩充当前数据上下文。

为此，我们可以注册一个新的 #eachWithParent 助手，如下所示：

Handlebars.registerHelper("eachWithParent",function(context,options){
    var parentContext=this;
    var contents="";
    _.each(context,function(item){
        var augmentedContext=_.extend(item,parentContext);
        contents+=options.fn(augmentedContext);
    });
    return contents;
});

现在，如果您用这个新的助手替换嵌套的#each，您将可以访问“content”中的父属性。