CODEWITHSUNDEEP
ember.js
Nairam
Nairam

Reputation: 285

Getting the property inside a controller in Ember.js

I am beginner with Ember.js and I guess there's a really simple answer to my problem so please bear with me.

I try to establish a two-way binding between a controller property and a "value" property in a Ember.TextField that is in the controller's correspondant template. I already succeded in giving the property in the controller a specific initial value that is reflected in the value property of the Ember.TexField, like:

js code:

App = Ember.Application.create();
App.IndexController = Ember.ObjectController.extend({
              aProperty: 1 });

template:

<script type:"text/x-handlebars" data-template-name="index">
{{view Ember.TextField valueBinding="aProperty"}}
</script>

Now the text field shows the value("1") and everything is fine. If I now try to enter a new value into the textfield, say "2", and try to check the value of "aProperty" in the browser console with App.IndexController.get("aProperty") it doesn't work and throws an error and says that "get()" is not defined. How could I retrieve the value of "aProperty" from the IndexController and check if it has updated the value to what I entered in the Ember.TextField?

Any hints, comments and advices are greatly appreciated!

Thank you!

Edit: Both answers below accomplished what I was trying to do. I got it working too: I created a concrete instance of the App.IndexController after having extended it, like this:

App.IndexController = Ember.ObjectController.extend({
              aProperty: 1 });
App.indexController = App.IndexController.create();

and could retrieve the value of aProperty from the console with App.cueController.get('aProperty'). However, all of the examples from Ember's documentation never create concrete instances of the controllers so I'm wondering if this is necessary, much less encouraged by Ember for a real-world app. Any ideas?

Upvotes: 0

Views: 1098

Answers (2)

intuitivepixel
intuitivepixel

Reputation: 23322

Since using the __container__ is only for debugging purposes, if you want to log the property change without using the private __container__ you could set an observer on the controller property watching for changes and log the new value to the debugger console.

Example:

App = Ember.Application.create({});

App.IndexController = Ember.ObjectController.extend({
  aProperty: 1,
  aPropertyDidChange: function() {
    console.log(this.get('aProperty'));
  }.observes('aProperty')
});

Working jsbin.

Hope it helps

Upvotes: 0

selvagsz
selvagsz

Reputation: 3872

You should lookup the controller like this in your debugging console:

App.__container__.lookup('controller:index').get('aProperty')

http://jsbin.com/uxojek/9/edit

Upvotes: 2

Related Questions