3

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.

4

1 回答 1

4

你有没有尝试过：

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

要访问其他控制器实例，请使用该needs属性。每个指定的控制器都将被注入到controllers属性中。因此needs: ['application']，将应用程序控制器注入controllers.applicaiton.

于 2013-08-22T16:36:14.980 回答