ember.js - バインディングの表示

Question

ログインできるシンプルなアプリは次のようになります。

{{#view App.mainV}}
  {{#if logged}}
     Hey!
  {{else}}
  <!-- Login form here when clicked: App.mainC.login()-->
  {{/if}}
{{/view}}

サンプルコントローラーは次のとおりです。

App.mainC = Ember.ArrayController.create({
    login: function(){
        if(ok)//Everything went fine
            App.mainV.logged = true;
    }
});

ここにmainVがあります：

App.mainV = Ember.View.extend({
    logged: false,
    test: function()
    {
        console.log('JO');
    }
});

このアプリに関して 2 つの質問があります。

• Logged を true ビューに変更しても変更されないのはなぜですか?

• App.mainV.test() を呼び出すと、エラーが発生します。なんで？

  TypeError: 'App.mainV.test' は関数ではありません

Answer 1

テンプレートからビューのプロパティにアクセスする場合は、"view" を前に付ける必要があります。あなたの例では: {{#if view.logged}}.

インスタンスではなくクラスであるApp.mainV.test()ため、できません。App.mainVできますApp.mainV.create().test()。

また、Ember.js の規則に合わせて名前App.mainVを変更する必要があります (クラス名は大文字にする必要があります。 http://www.emberist.com/2012/04/09/naming-conventions.htmlを参照してください) 。App.MainV

編集：

あなたの例には別の問題があります。コントローラーがビューの値を変更しようとしています。Ember の方法では、ビューのプロパティをコントローラーにバインドする必要があります。コントローラーの変更はビューに反映されます。

<script type="text/x-handlebars">
{{#view App.MainView}}
    {{#if view.logged}}
        Hey!
    {{else}}
        <!-- Login form here when clicked: App.mainController.login()-->
    {{/if}}
{{/view}}
</script>​

App = Ember.Application.create();

App.mainController = Ember.Controller.create({
    logged: false,
    login: function() {
        this.set('logged', true);
    }
});

App.MainView = Ember.View.extend({
    loggedBinding: 'App.mainController.logged'
});

// change in controller will be propagated to the view
App.mainController.set('lo​gged', true);​​​​​​