在contentFor块中是否可以使用主区域的数据上下文?

时间:2015-01-30 15:29:41

标签: javascript meteor iron-router

背景

我正按照this Evented Mind video (7:07)尝试制作痕迹痕迹。

问题:

我希望文章标题显示在/分隔符旁边。这是一张图片供参考:

enter image description here

当我导航到文章页面时,/分隔符会动态显示在痕迹路径中,但标题不会显示。

问题

奇怪的是,标题显示在主要区域,就在下方。不应该在contentFor块中提供模板的数据上下文吗?


守则

这是我的布局模板。查看底部的产量区域:

<template name='Layout'>
    <div class="container">
        <div id="new-article">
            {{#linkTo route="blog.new"}}
                New Article
            {{/linkTo}}
        </div>
    </div>

    <ul class="breadcrumb">
        {{> yield "breadcrumbs"}}
    </ul>
    <div class="content">
        {{> yield}}
    </div>
</template>

这是带有问题的痕迹痕迹的模板(位于最顶层):

<template name='Article'>

    {{#contentFor "breadcrumbs"}}
        <li>
        {{#linkTo route="home"}}
            Home
        {{/linkTo}}
        </li>
        <li>
            <span class="divider">/</span>
        </li>
        <li>
            {{title}}
        </li>
    {{/contentFor}}

    <h1>
        {{title}}
    </h1>

    <div>
        {{author}}
    </div>
    <p>
        {{body}}
    </p>


</template>     

1 个答案:

答案 0 :(得分:1)

问题不在于HTML。它与路由器上设置的数据选项有关。由于某些原因我不完全理解并希望向我解释,在“布局”功能上定义数据选项会使数据可用于布局和正在呈现的模板。

我的假设是两个屈服区域 - 面包屑和主要 - 具有从布局继承的不同范围。即使块内容的代码写在文章模板中。

<强>之前: 在下面的代码中,数据选项在文章模板上定义。

Router.route("/blog/:_id", function(){
  this.layout("Layout");  

  this.render('Article', {
    data: function() {
      return  Articles.findOne({_id: this.params._id});  
    }
  });
}, {
  name: 'article.show'
});

之后:在下面的代码中,将在布局上定义数据选项。

Router.route("/blog/:_id", function(){
  this.layout("Layout", {
    data: function() {
      return  Articles.findOne({_id: this.params._id});  // good to make these functions, so that they stay reactive
    }
  });  // you can set data context here too, which is accessible to all children

  this.render('Article', {});
}, {
  name: 'article.show'
});