2

我有一个具有以下布局的登录系统：

<template name="loginLayout"> 
    <div class="container">
      <div class="flat-form">
        <ul class="tabs">
          <li> <a id="login"          class="{{#if isRouteActive 'login' }}active{{/if}}"         href="{{ pathFor 'login' }}">Login</a> </li>
          <li> <a id="registration"   class="{{#if isRouteActive 'registration' }}active{{/if}}"  href="{{ pathFor 'registration'  }}">Register</a> </li>
          <li> <a id="resetPassword"  class="{{#if isRouteActive 'resetPassword' }}active{{/if}}" href="{{ pathFor 'resetPassword' }}">Reset Password</a> </li>
        </ul>
        {{> yield }}
    </div>
    </div> </template>

根据用户点击的链接，meteor 在 yield 字段中呈现正确的模板。这很好用，但是当用户登录时，私有页面会在此布局中呈现，这是错误的。如果我只为登录路由指定布局，我不明白为什么会这样。

路线文件：

Router.map( function () {
  this.route( 'login',  
            { 
              path : '/login',  
              layoutTemplate: 'loginLayout',
              yieldTemplate : 'login',
              data : { 
                appName : "test", 
                welcomeMessage  : "test." 
              }
            }
    );

  this.route( 'registration',  
            { 
              path : '/registration',  
              layoutTemplate: 'loginLayout',
              yieldTemplate:'registration',
              data : {}
            }
    );

  this.route( 'resetPassword',  
            { 
              path : '/resetPassword',  
              layoutTemplate: 'loginLayout',
              yieldTemplate : 'resetPassword',
              data : {}
            }
    );
  this.route('library');
});

var mustBeSignedIn = function(pause) {
  if (!(Meteor.user() || Meteor.loggingIn())) {
    Router.go('login');
    pause();
  }
};

Router.onBeforeAction(mustBeSignedIn, {except: ['login', 'registration', 'resetPassword']});

登录.js

Template.login.events({

    'submit #login-form' : function(e, t){
      e.preventDefault();
      // retrieve the input field values
      var userName = t.find('#login-email').value
        , password = t.find('#login-password').value;

        Meteor.loginWithPassword(userName, password, function(err){
        if (err) { 
          console.log("Error when loggin ");
          console.log(err.reason);
        } else {
          console.log("user logged in");
          /***** REDIRECT ******/ 
          Router.go('library');
        }
      });
         return false; 
      }
 });

logi.js 模板：

<template name="login"> 
<div id="login" class="form-action">
  <h1>Login on {{ appName }} </h1>
    <p> {{ welcomeMessage }} </p>
    <form id="login-form">
      <ul>
        <li> <input id="login-email" type="text" placeholder="Username" /></li>
        <li> <input id="login-password" type="password" placeholder="Password" /></li>
        <li> <input id="submit" type="submit" value="Login" class="button" /></li>
      </ul>
    </form>
</div>
</template>

我还注意到，当我使用“go”方法将用户重定向到给定路线时，数据字段被重置。然而，当我写下网址时，一切正常。

完整来源

4

1 回答 1

1

它的工作方式是为我的主要布局创建一个额外的控制器，并使用layoutTemplate、yieldTemplate和action: function(){}再次呈现我的页眉和页脚模板。

这是一个示例路线：

Router.route('einstellungen', function() { // settings
  this.render('Settings', {
    to: 'interfaceContainer'
  });
}, {
  controller: 'InterfaceController'
});

并且仅在添加以下代码后，Router.go('/einstellungen'); 以呈现整个布局和产量布局的方式工作。

InterfaceController = RouteController.extend({
  layoutTemplate: 'interfaceLayout',
  yieldTemplates: {
    'Header': {
      to: 'interfaceHeader'
    },
    'Footer': {
      to: 'interfaceFooter'
    }
  },
  action: function() {
    this.render('Header', {
      to: 'interfaceHeader'
    });
    this.render('Footer', {
      to: 'interfaceFooter'
    });
  }
});

我还补充说：

Router.configure({
  layoutTemplate: 'interfaceLayout',
  yieldTemplates: {
    'Header': {
      to: 'interfaceHeader'
    },
    'Footer': {
      to: 'interfaceFooter'
    }
  }
});

但这似乎对Router.go()没有任何影响；

也可以看看：

https://forums.meteor.com/t/custom-layout-for-a-specific-route-not-displaying-with-iron-router/5758

https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#creating-route-controllers

于 2015-08-30T12:16:37.077 回答