Binding doesn't work

Question

this is my first post in stackoverflow.

I'm new to ember.js and i've been studying ember.js.

I'm building a small app to learn ember.js now,but binding doesn't work somehow.

Please give me a help!!

#------------------------Controller------------------------


App.ApplicationController = Ember.Controller.extend();

App.monstersController = Ember.ArrayProxy.create({

content:[],

//some code to add model instances to content...

counter: function(){
var content = this.get('content');
return content.get('length');
}.property('length')

});


#------------------------View------------------------


App.StatsView = Ember.View.extend({
counterBinding : 'App.monstersController.counter',



#------------------------HTML------------------------

<script type="text/x-handlebars" data-template-name="application">

//some code here

{{#view App.StatsView}}Counter: {{counter}}{{/view}}

//I'm expecting the length of content array in App.monstersController above.

//some code here

</script>

Answer 1

If you want to access a value off of a view you need to access it via {{view.counter}} .

However, in your case you should probably be setting the controller on the view like:

App.StatsView = Ember.View.extend({
  controllerBinding : 'App.monstersController'
})

Once you get the hang of that, I'd look into setting up a router to manage binding controllers and views together.