Ember.js访问和更改控制器之间的变量 [英] Ember.js accessing and changing variables between controllers

问题描述

我试图用ember写一个登录/注销小部件。我想切换isLoggedIn属性，以便当用户注销时设置为False，当用户登录时为True。isLoggedIn在我的应用程序控制器中定义，并在我的应用程序模板中使用handlebars进行调用。现在，当用户登录成功并且LoginController中激活Login功能时，我需要将isLoggedIn的值设置为true，并在用户单击注销时注销。所以我的问题是：我如何拥有LoginController&应用程序控制器互相访问并更改其中的变量。

这是应用程序模板中的一些代码：

 < section class =top-bar-section> 
<！ - 右导航区域 - > 
< ul class =right> 
 ... 
 {{#if isLoggedIn}} 
< li>< a href =＃{{actionlogout}}>注销< / a> ; /立GT; 
 {{else}} 
< li> 
 {{#linkTologin}}登录{{/ linkTo}}< / li> 
 {{/ if}} 
< / ul> 
< / section> 
< / nav> 
 {{outlet}} 
  

应用程序控制器：

  var App; 
 
 App = require（'app'）; 
 
 module.exports = App.ApplicationController = Ember.ObjectController.extend（{
 isLoggedIn：false，
 
 logout：function（）{
 this .set（isLoggedIn，false）; 
 console.log（this.token）; 
} 
}）; 
  

登录模板：

  ... 
< form class =form-horizo​​ntal{{actionloginon =submit}}> 
 ... 
< div class =row> 
< div class =large-5 columns> 
< label>用户名< / label> 
 {{input value = username type =textplaceholder =Username}} 
< / div> 
< div class =large-5 columns> 
< label>密码< / label> 
 {{input value = password type =passwordplaceholder =Password}} 
< / div> 
< div class =large-2 columns> 
< / br> 
 {{input class =small buttontype =submitvalue =Log In}} 
< / div> 
< / div> 
< / form> 
 {{#if errorMessage}} 
< div class =large-12 columns alert-box alert> {{errorMessage}}< / div> 
 {{/ if}} 
 {{/ if}} 
  

LoginController ：

  var App; 
 
 App = require（'app'）; 
 
 module.exports = App.LoginController = Ember.ObjectController.extend（{
 // some variables ... 
 
 //其他函数... 
 
 login：function（）{
 //将isLoggedIn设置为true 
 ...} 
 
}）; 
  

最初导航栏会看到isLoggedIn是false，因此显示Login。一旦您成功登录并单击提交，一个操作将触发并激活LoginController中的login（）。那就是我要将isLoggedIn设置为true，这样Logout就会出现在导航栏上。

解决方案

您尝试过：

  module.exports = App.LoginController = Ember.ObjectController.extend（{
需要：['application'] 
 login：function（）{
 if（authentification sucess）{
 this.set（'controllers.application.isLoggedIn'，true）; 
} else {
 this.set（'controllers.application.isLoggedIn'，false）; 
} 
} 
}）; 
  

要访问其他控制器实例，请使用需要属性。每个指定的控制器将被注入到控制器属性中。所以需要：['application'] ，将应用程序控制器注入 controllers.applicaiton 。

I am attempting to write a login/logout widget with ember. I want to toggle the isLoggedIn property such that when a user logs out it is set to False and, True when a user logs in. isLoggedIn is defined in my application controller and called with handlebars in my application template. For now, I need to set the value of of isLoggedIn to true when a user logs in successfully and the Login function is activated inside of LoginController - and logout when the user clicks logout. So my question is: how can I have LoginController & application controller access each other and change variables within them.

Here is some code from the application template:

    <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
            ...
            {{#if isLoggedIn}}
            <li><a href="#" {{ action "logout" }}>Logout</a></li>
            {{else}}
            <li>
            {{#linkTo "login"}}Login{{/linkTo}} </li>
            {{/if}}
        </ul>
    </section>
</nav>
{{outlet}}

application controller:

var App;

App = require('app');

module.exports = App.ApplicationController = Ember.ObjectController.extend({
    isLoggedIn: false,

    logout: function(){
        this.set("isLoggedIn", false);
        console.log(this.token);
    }
});

login template:

...
<form class="form-horizontal" {{action "login" on="submit"}}>
    ...
<div class="row">
    <div class="large-5 columns">
        <label>Username</label>
          {{input value=username type="text" placeholder="Username"}}
    </div>
    <div class="large-5 columns">
        <label>Password</label>
         {{input value=password type="password" placeholder="Password"}}
    </div>
    <div class="large-2 columns">
    </br>
    {{input class="small button" type="submit" value="Log In"}}
    </div>
</div>
</form>
 {{#if errorMessage}}
        <div class="large-12 columns alert-box alert">{{errorMessage}}</div>
      {{/if}}
    {{/if}}

LoginController:

var App;

App = require('app');

module.exports = App.LoginController = Ember.ObjectController.extend({
    //some variables...

    //other functions...

    login: function() {
        // set isLoggedIn to true here
     ...}

});

initially the navbar will see that isLoggedIn is false and therefore show Login. Once you successfully login and click submit, an action will fire off and activate login() inside of LoginController. That is where I want to set isLoggedIn to true such that Logout will appear on the navbar.

解决方案

Have you tried:

module.exports = App.LoginController = Ember.ObjectController.extend({
    needs: ['application']
    login: function() {
        if (authentification sucess) {
             this.set('controllers.application.isLoggedIn', true);
        } else {
             this.set('controllers.application.isLoggedIn', false);
        }            
    }
});

To access other controllers instances, you use the needs property. Each specified controller will be injected in the controllers property. So needs: ['application'], injects the application controller in controllers.applicaiton.

这篇关于Ember.js访问和更改控制器之间的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！