Question

我有两个不同的用户类型＆＃39;阅读器＆＃39;和＆＃39;出版商＆＃39;。此信息存储在Meteor.users文档Meteor.users.userType: 'publisher'中，或者可以Meteor.users.userType:'reader'

如何根据userType动态地向appBody添加元素？

对于userTypes

，数据上下文和菜单项等内容当然会有所不同

我引用了https://github.com/EventedMind/iron-dynamic-template

HTML：

<head>
 <title>Site</title>
</head>

<template name="appBody"> //this is layoutTemplate
    <div class="navbar navbar-fixed-top navbar-custom">
        <div class = "container">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">menu title A</a></li>
                <li><a href="#">menu title B</a></li>
                ***DYNAMICALLY ADD LIST ELEMENT DEPENDING ON WHICH 'userType' IS LOGGED IN HERE***
            </ul>
        </div>
    </div>
    {{> UI.dynamic template=currentUser.userType }}
</template>


<template name="reader">
  unique layout
{{> yield}}
</template>


<template name="publisher">
  unique layout
{{> yield}}
</template>

router.js

Router.configure({
    layoutTemplate: 'appBody',
    loadingTemplate: 'appLoading'
});

Answer 1

如果您想继续使用UI.dynamic，我建议您编写自己的模板选择器功能：

释义https://github.com/EventedMind/iron-dynamic-template，它需要看起来像这样：

if (Meteor.isClient) {
  UI.body.helpers({
   getTemplate: function () {
     return something;
   }
  });
}

我建议将帮助器重命名为userType并使用如下：

if (Meteor.isClient) {
  UI.body.helpers({
    userType: function () {
     var user = Meteor.user();
     return (user && user.userType)? user.userType : ''; 
   }
  });
}

并使用{{> UI.dynamic template=userType }}

您可以更改＆＃39;＆＃39;在return声明中对匿名＆＃39;如果未登录的用户失败，但您还需要编写匿名用户类型模板。

但是，您不需要UI.dynamic来实现此目的：

你可以使用meteor if模板助手：

{{#if userTypeIs "publisher"}}
 {{ > publisher }}
{{/if}}
{{#if userTypeIs "reader"}}
 {{ > reader }}
{{/if}}

这本身不会起作用。

接下来，您需要在JS中包含Template.appbody.userTypeIs

的辅助函数

要在本地执行此操作，请将其包含在Template.appbody.helpers()

中

Template.appbody.helpers({
    ....other helpers....
    userTypeIs: function(t){
          var user = Meteor.user();
          return ( (user) && (user.userType) && (user.userType === t) );
    }

userTypeIs可能对其他模板很有用，因此如果需要，可以使用Template.registerHelper()为所有模板全局定义：

Template.registerHelper('userTypeIs', function(t){
      var user = Meteor.user();
      return ( (user) && (user.userType) && (user.userType === t) );
 }

请注意，此函数返回一个布尔值，与if一起使用，并获取一个参数，该参数在模板中引用。执行使用＆＃34;防御性编程＆＃34;如果由于某种原因它未定义Meteor.user（）或Meteor.user（）。userType，它将返回false。

此模板是Meteor的标准模板，无需将任何其他模块导入到此特定任务的项目中。

此外，所有这些都在Meteor API docs中，如果您还没有这样做，我建议您完整阅读。

Answer 2

我在某种程度上打破了应用程序进入登录状态而未登录状态。当用户登录时，根据他们的用户类型，我要么渲染一个＆＃39;读者＆＃39;模板或发布商＆＃39;模板。现在，这两个都可以作为每个用户的布局模板。然后我可以使用iron：router。将模板输入到这些模板中。

Router.configure({
layoutTemplate: 'parent',
loadingTemplate: 'appLoading'
});


<template name="parent">
  {{#if currentUser}}
  {{> UI.dynamic template=currentUser.userType }} //this returns 'reader' or 'publisher'
  {{else}}
  {{> notLoggedIn}}
  {{/if}}
</template>

<template name="notLoggedIn">
//unique styling for non logged in users such as join and log in.
{{> yield}}
</template>

<template name="reader">
//unique styling and custom reader navigation menu
{{> yield}}
</template>

<template name="publisher">
//unique styling and custom publisher navigation menu
{{> yield}}
</template>

现在我可以将任何模板从Router.route渲染到yield区域：））

Router.route('/path', function () {
this.render('templateName');
}

不同用户类型的不同布局

2 个答案: