在流星模板中访问父数据上下文
Accessing parent data context in meteor templates
如何在 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>
这是我的 post 模板的 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'
}
],
...
我想parentData就是你想要的。
这就是我设法解决问题的方法。我刚刚将 post.photos 变量传递给子模板。
在 <template name="post">
:
...
<div class="photo-gallery">
{{> photoGallery photos=post.photos}}
</div>
...
在<template name="photoGallery">
中:
{{#each photos}}
<img src="{{src}}">
{{/each}}
期望的结果是子模板访问父助手的结果。您可以像这样设置 photoGallery
模板的上下文来做到这一点:
{{> photoGallery post}}
现在,在 photoGallery
内部,上下文是 post
因此我们可以遍历照片:
<template name="photoGallery">
{{#each photos}}
<img src="{{src}}">
{{/each}}
</template>
您可以使用 ../
访问父数据
<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
.
使用 post 属性
如何在 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>
这是我的 post 模板的 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'
}
],
...
我想parentData就是你想要的。
这就是我设法解决问题的方法。我刚刚将 post.photos 变量传递给子模板。
在 <template name="post">
:
...
<div class="photo-gallery">
{{> photoGallery photos=post.photos}}
</div>
...
在<template name="photoGallery">
中:
{{#each photos}}
<img src="{{src}}">
{{/each}}
期望的结果是子模板访问父助手的结果。您可以像这样设置 photoGallery
模板的上下文来做到这一点:
{{> photoGallery post}}
现在,在 photoGallery
内部,上下文是 post
因此我们可以遍历照片:
<template name="photoGallery">
{{#each photos}}
<img src="{{src}}">
{{/each}}
</template>
您可以使用 ../
访问父数据<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
.