视图绑定Emberjs

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

关于这个应用程序，我有两个问题：

• 为什么当我更改日志到真视图时不会改变呢？
• 如果调用App.mainV.test()，就会得到一个错误。为什么？ TypeError：'App.mainV.test‘不是一个函数

Answer 1

如果要从模板访问视图的属性，则必须以“view”作为前缀。在您的示例中：{{#if view.logged}}。

您不能执行App.mainV.test()，因为App.mainV是一个类，而不是实例。你可以做App.mainV.create().test()。

您应该将App.mainV重命名为App.MainV，以适应Ember.js约定(类名应大写，参见http://www.emberist.com/2012/04/09/naming-conventions.html)

编辑

在您的示例中还有另一个问题:控制器试图修改视图中的值。在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);​​​​​​