access property of controller from within view

Question

I wanna do something like a progress bar, which will be controlled by ember. So in my eyes, there are two and a half ways to achieve this:

1. Have an observer in the controller, which sets the elements' width when triggered. Problem: AFAIK, one can't access DOM-elements from within the controller, i.e. like the way you'd do it in the view this.$('#progress').

2. Have an observer in the view, which observes the controller's property. Problem: I don't know, how to observe (and access) a controller's property.

3. (bind the controller's property via {{bindAttr}} to a freaky data-progress="42" attribute and adjust the elements width whenever the attribute's value has changed)

Answer 1

Option 2 is your best bet.

Problem: I don't know, how to observe (and access) a controller's property.

Ember will set a view's controller property when the view is created, you can use that to access the controller's property.

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  percentComplete: '0'
});

App.ProgressView = Ember.View.extend({
  percentChanged: function() {
    percentString = (this.get('controller.percentComplete') + "%");
    this.$('.bar').css('width', percentString);
  }.observes('controller.percentComplete').on('didInsertElement')
});

I've posted a working example here: http://jsbin.com/hitacomu/1/edit