2014-05-18 54 views
2

我有以下佈局的登錄系統:鐵路由器,Router.go()不完全渲染模板

<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> 

根據該鏈接的用戶點擊,流星呈現在正確的模板產量領域。 這工作正常,但當用戶登錄時,私人頁面呈現在此佈局中,這是錯誤的。我不明白爲什麼會發生這種情況,如果我只爲登錄路由指定佈局。

routes文件:

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']}); 

Login.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> 

我也注意到,當我使用的方法 「走出去」將用戶重定向到給定路由,數據字段被重置。而當我寫下url時,每件事情都可以正常工作。

Full source

+1

你有一個登錄模板中定義的? – jacksondc

+0

是的。當然!我可以在這裏添加它 –

+0

你有沒有修好它? –

回答

1

它爲我工作的方式是爲我的主要佈局創建一個額外的控制器,並與和layoutTemplate中yieldTemplate行動再次渲染我的頁眉和頁腳模板:函數(){ }

這裏的示例路線:

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