0

2つの子の間で切り替わるビューをレンダリングしようとしています（またはそう願っています）が、何かが正確に機能していません。これが私のテンプレートです：

{{#view App.LoginFormView isVisibleBinding="user.isNotAuthenticated" }}
Username: {{view Ember.TextField valueBinding="user.loginName"}} / 
Password: {{view Ember.TextField valueBinding="user.userPassword" type="password"}}
<button class="btn" {{ action "login" }} {{bindAttr disabled="user.isNotValid"}}>Login</button>
{{/view}}

{{#view App.LoginInfoView isVisibleBinding="user.isAuthenticated" }}
You are logged in as {{user.loginName}}. Click <a {{action "logout"}}>here</a> to logout
{{/view}}

app.jsには次のものがあります。

App.User = Ember.Object.extend({
    loginName:'',
    userPassword:'',
    rememberMe:true,
    isNotValid:function(){
        return (this.get("loginName") == '') || (this.get("userPassword") == '');
    }.property('loginName', 'userPassword'),
    isAuthenticated:false,
    isNotAuthenticated:function(){
        return !this.isAuthenticated;
    }.property('isAuthenticated')
});

App.AuthenticationController = Ember.Controller.extend({
    login:function() {
        alert("loginName:"+this.user.get('loginName')+";\n"+
              "userPassword:"+this.user.get('userPassword')+";\n"+
          "rememberMe:"+this.user.get('rememberMe')+";\n");
        this.user.isAuthenticated = true;
    },
    user:App.User.create()
});
App.AuthenticationView = Ember.View.extend({
    templateName: 'authentication',
    userBinding:"App.AuthenticationController.user"
});

App.LoginFormController = Ember.Controller.extend({
    userBinding:"App.AuthenticationController.user"
});
App.LoginFormView = Ember.View.extend();

App.LoginInfoController = Ember.Controller.extend({
    userBinding:"App.AuthenticationController.user"
});
App.LoginInfoView = Ember.View.extend();

App.Router = Ember.Router.extend({
    enableLogging:true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router){
                router.get('applicationController').connectOutlet('authentication','authentication');
            },
            login:function(router){
                router.get('authenticationController').login();
            }
        })
    })
});

私が抱えている問題は、isAuthenticatedプロパティの変更時にビューが切り替わらないことです。私はそれが自動的に起こるだろうという印象を受けましたが、それでもそうではありません。これを機能させる方法について何かアイデアはありますか？または、基本的なものが不足していますか（ember.jsの初心者はここにいるので、優しくしてください:-)）

乾杯、アレックス。

4

1 に答える 1

0

ユーザー認証は、次の方法で実装できます。

テンプレート内 (たとえば、_header.hbsの部分的なテンプレート内application.hbs)

{{#if needAuth}}
    // login form goes here
    <button {{action submitLogin}}>login</button>
{{else}}
    <small {{action logout}}>logout</small>
{{/if}}

アプリケーションコントローラーで:

submitLogin: function () {
    // do login stuff

    // if login success
    that.set('needAuth', false);
    // else
    that.set('needAuth', true);
});

DOM は自動的に更新されます。他の部分テンプレート{{#if needAuth}}でも同様に使用できます。

于 2013-05-04T21:22:37.900 に答える