简体   繁体   English

流星:在模板内部渲染模板

[英]Meteor: Render template inside a template

I have a list of names on 'postlist' template. 我在“帖子列表”模板上有一个名称列表。 These are 'usernames' of the person who created the post. 这些是创建帖子的人的“用户名”。 I have created a href link so that when a user clicks on the name, they are routed/directed to a new template 'viewpost' and able to view the full post document. 我创建了一个href链接,以便当用户单击名称时,他们将被路由/定向到新模板“ viewpost”,并能够查看完整的帖子文档。

But, I would like the 'viewpost' template to get rendered where I have put {{> yield}} inside the 'postlist' template instead. 但是,我希望呈现“ viewpost”模板,而不是将“ {{> yield}}”放在“ postlist”模板中。 How do I configure the layourTemplate because I already have one working for another part of the app. 如何配置layourTemplate,因为我已经为应用程序的另一部分工作了。

Of course, this post document obviously should change according to which name the user clicks. 当然,此后置文档显然应根据用户单击的名称进行更改。

Think Meteor todos example. 以流星待办事项为例。 Depending on whether you click 'join' or 'signin', the relevant templates gets rendered. 根据您单击“加入”还是“登录”,将渲染相关模板。

So what I have is so far is as follows. 因此,到目前为止,我所拥有的如下。

postlist.html (showing list of the 'fullname' field in post documents). postlist.html(显示邮政文档中“全名”字段的列表)。

<template name="postlist"> 
<div class="container">
<div class="col-sm-3">
    {{#each post}}
    <li><a href="{{pathFor 'viewpost'}}" >{{fullname}}</a></li>
    {{/each}}
</div>
</div>
{{> yield}}
</template>

router.js router.js

Router.map(function(){
this.route('postlist',{
  path: '/postlist',
  template: 'postlist',
  waitOn: function(){
    return Meteor.subscribe('posts');
  },
  data: function(){
    return {post: Posts.find({})};
}
});
this.route('viewpost',{
  path: '/viewpost/:_id',
  template: 'viewpost',
   waitOn: function(){
    return Meteor.subscribe('posts');
  },
  data: function() { return Posts.findOne(this.params._id); }
});
});

Since there doesn't seem to be much of a content overlap between the 'viewpost' template and the 'postlist' template, I think it will actually be cleaner to just use {{> viewpost currentPost}} in place of the yield, and set the currentPost programmatically. 由于'viewpost'模板和'postlist'模板之间似乎没有太多内容重叠,因此我认为仅使用{{> viewpost currentPost}}代替yield会更干净,并且以编程方式设置currentPost。 For example, in the postlist template, you can have a currentPost variable that returns the data for the current post, like so: 例如,在帖子列表模板中,您可以具有currentPost变量,该变量返回当前帖子的数据,如下所示:

Template.postlist.helpers({
    currentPost: function () {
        return Posts.findOne(Session.get('currentPost'));
    }
});

and just set the Session when you click on the link in the postlist template. 并且只需在发布列表模板中点击链接即可设置会话。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM