Question

我正在开发一个meteor.js应用程序。我有两个主要的模板/页面，home.html和groups.html。我根据主菜单的选择渲染这些模板。在主页模板中，我只显示有关该网站的基本信息。但是在群组模板中，我有侧边菜单，其中包含时间轴，聊天，群组博客选项，并根据侧边菜单的选择，我在群组模板中渲染时间轴或聊天或群组博客模板。我用两种不同的方法成功了。

你能告诉我他们是否有正确的方法，如果他们两个都是，哪一个更好用？

在第一种方法中，有没有办法等待渲染子模板，直到数据准备就绪，比如铁路由器中的waitOn属性？

第一种方法：我使用动态模板，使用Session变量渲染和设置子模板的数据上下文。

layout.html
 <template name="layout">
  <div>
    {{> header}}
    <div id="main" class="container">
        {{> yield}}
    </div>
 </div>
</template>


groups.html
<template name="groups">
 <div class="row">
   <div class="row-fluid">
       <div class="col-md-9 col-lg-9">
           {{> dynamictemplate}}
       </div>
   </div>
</div>
</template>

dynamictemplate.html
 <template name="dynamictemplate">
   {{#DynamicTemplate template=getTemplate data=getData}}
    Default content when there is no template.
   {{/DynamicTemplate}}
</template>

dynamictemplate.js
Template.dynamictemplate.helpers({
getData: function () {
    var tempname="timeline";
    if(Session.get("menuitemselected")!=null){
        tempname =Session.get("menuitemselected");
    }
    if(tempname=="timeline"){
        return {test:123};
    }else if(tempname=="calendar"){
        return {groupId:this._id};
    }
   },
   getTemplate: function () {
    var tempname="timeline";
    if(Session.get("menuitemselected")!=null){
        tempname =Session.get("menuitemselected");

    }
    return tempname;
  }
 });

第二种方法，我为路由中的所有子模板定义新路由，并且我在home模板中使用带有region属性的yield。（我不知道我是否应该在除布局之外的任何地方使用yield。 HTML）

layout.html
<template name="layout">
 <div>
{{> header}}
<div id="main" class="container">
    {{> yield}}
</div>
</div>
</template>

groups.html
<template name="groups">
<div>
      <div class="col-md-3">
        {{> sidemenu}}
     </div>
     <div id="main" class="col-md-9">
        {{> yield region="detailrender"}}
    </div>
</div>
</template>

 router.js
.....
this.route('groupdetail', {
    path: '/groupsmain/:_id',
    layoutTemplate: 'layout',
    yieldTemplates: {
        'timeline': {to: 'detailrender'}
    },
    data: function() { return Groups.findOne(this.params._id);
    }
});
  this.route('groupdetailcalendar', {
    path: '/groupsmain/:_id/calendar',
    layoutTemplate: 'layout',
    template: 'groupdetail',
    yieldTemplates: {
        'calendar': {to: 'detailrender'}
    },
    data: function() { return Groups.findOne(this.params._id);
    .....
   });

Meteor.js中的动态模板和路由

0 个答案: