CODEWITHSUNDEEP
ember.js
user50992
user50992

Reputation: 201

View binding Emberjs

I have a simple app where you can login it looks like this:

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

Here is sample controller:

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

Here is mainV:

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

I have two questions regarding this app:

Upvotes: 2

Views: 2418

Answers (1)

St&#233;phane Blond
St&#233;phane Blond

Reputation: 810

If you want to access a view's property from a template, you have to prefix with "view." In your example: {{#if view.logged}}.

You can't do App.mainV.test() because App.mainV is a class, not an instance. You could do App.mainV.create().test().

And you should rename App.mainV to App.MainV to fit Ember.js conventions (class names should be capitalized, see http://www.emberist.com/2012/04/09/naming-conventions.html)

Edit:

There's another problem in your example: the controller tries to modify a value in the view. In the Ember way, you should bind a view's property to the controller. Any change in the controller would be propagated to the view:

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

Upvotes: 7

Related Questions