在流星模板中访问父数据上下文答案

【问题标题】：Accessing parent data context in meteor templates在流星模板中访问父数据上下文
【发布时间】：2015-05-06 19:17:42
【问题描述】：

如何在 Meteor 中访问父模板的数据。在下面的示例中，我想从<template name="photoGallery"> 访问<template name="post"> 模板数据这是我正在做的，但它不起作用：

<template name="post">
  <div class="well">

    <p class="text-left text-muted"><span class="glyphicon glyphicon-time"></span> <i>{{post.date}}</i></p>

    <div class="post-text">
      <p>{{post.text}}</p>       
    </div>

    <div class="photo-gallery">
      {{> photoGallery}}
    </div>

    <hr>
    <div class="like-post text-right">
      <button>        
        <span class="glyphicon glyphicon-heart liked"></span>
        {{post.likeCount}}
      </button>      
    </div>

  </div>
</template>

和：

<template name="photoGallery">
  {{#each post.photos}}  
    <img src="{{src}}"> //this does not work
  {{/each}}
</template>

这是我的帖子模板的 js 文件：

Template.post.helpers({  


    post: {
        text: 'Teks, surat, audio we video. Postda tekst bolanda test uchin ulanyljak yazgy. Shu yazgynyn maksimum simwol sany yuz kyrk simwoldan gechmeli dal. Eger gechen yagdayynda onda kop nokatlar goyulmaly.',
        date: '31-12-205 23:59',
        likeCount: 13,
        photos: [      
          {
            src: 'http://cs625423.vk.me/v625423655/899b/W9agrD2UimQ.jpg',
            src_small: 'http://cs625423.vk.me/v625423655/899a/zkipjxINKM8.jpg',
            src_big: 'http://cs625423.vk.me/v625423655/899c/uL2EOORDYV4.jpg'        
          },
          {
            src: 'http://cs625423.vk.me/v625423655/899b/W9agrD2UimQ.jpg',
            src_small: 'http://cs625423.vk.me/v625423655/899c/uL2EOORDYV4.jpg',
            src_big: 'http://cs625423.vk.me/v625423655/899a/zkipjxINKM8.jpg'
          },
          {
            src: 'http://cs623220.vk.me/v623220655/1e3be/uj7M9HwtkbA.jpg',
            src_small: 'http://cs623220.vk.me/v623220655/1e3bd/hkoSv-zpb4Y.jpg',
            src_big: 'http://cs623220.vk.me/v623220655/1e3bf/Zb3sQa0aX0U.jpg'
          },
          {
            src: 'http://cs623216.vk.me/v623216655/16c18/3mXm6-EZ-aM.jpg',
            src_small: 'http://cs623216.vk.me/v623216655/16c17/RtKyVS-D7GA.jpg',
            src_big: 'http://cs623216.vk.me/v623216655/16c19/_jy0aZu2GEA.jpg'
          }
        ],
    ...

【问题讨论】：

标签： javascript meteor

【解决方案1】：

您可以使用 ../ 访问父数据

<template name="photoGallery"> {{#each ../post.photos}} <img src="{{src}}"> {{/each}} </template>

如果还是不行，可以试试：

<div class="photo-gallery">
  {{#with post}}
    {{> photoGallery}}
  {{/with}}
</div>

您的照片库模板将如下所示：

<template name="photoGallery"> {{#each this.photos}} <img src="{{src}}"> {{/each}} </template>

如果您使用#with 助手，photoGallery 模板将获得post 上下文，您可以通过this 使用帖子属性。

【讨论】：

../ 技巧可用于访问父级的数据上下文，但无法访问其助手的结果。

【解决方案2】：

期望的结果是子模板访问父助手的结果。您可以通过设置photoGallery 模板的上下文来做到这一点，如下所示：

{{> photoGallery post}}

现在，在photoGallery 内部，上下文是post，因此我们可以遍历照片：

<template name="photoGallery">
  {{#each photos}}
    <img src="{{src}}">
  {{/each}}
</template>

【讨论】：

【解决方案3】：

这就是我设法解决问题的方法。我刚刚将 post.photos 变量传递给子模板。在<template name="post">:

...
<div class="photo-gallery">
  {{> photoGallery photos=post.photos}}
</div>
...

在<template name="photoGallery">:

{{#each photos}}
  <img src="{{src}}">
{{/each}}

【讨论】：

【解决方案4】：

我认为parentData 是你所追求的。

【讨论】：