javascript - 主要区域的数据上下文在 contentFor block 内可用吗？

Question

背景

我正在尝试按照 this Evented Mind video (7:07) 制作面包屑路径.

问题:

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

当我导航到文章页面时，/ 分隔符动态显示在面包屑路径中，但标题不显示。

问题

奇怪的是标题显示在主区域的正下方。模板的数据上下文不应该在 contentFor block 中可用吗？

<小时/>

代码

这是我的布局模板。请参阅底部的产量区域:

<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>     

Answer 1

问题根本不在于 HTML。这与路由器上设置的数据选项有关。由于某种原因我不完全理解并且希望向我解释，在“布局”函数上定义数据选项使数据可用于布局和正在呈现的模板。

我的假设是，两个生成区域(breadcrumb 和 main)具有从布局继承的不同作用域。即使 block 内容的代码是写在文章模板中的。

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

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'
});