从视图中访问控制器的属性

Question

我想做一个像进度条一样的东西,它将由余烬控制.所以在我看来,有两种方法可以达到这个目的:

1. 在控制器中有一个观察者,它width在触发时设置元素.问题:AFAIK,无法从控制器中访问DOM元素,就像在视图中一样this.$('#progress').

2. 在视图中有一个观察者,它观察控制器的属性.问题:我不知道,如何观察(和访问)控制器的属性.

3. (将控制器的属性绑定{{bindAttr}}到一个怪异的data-progress="42"属性,并width在属性的值发生更改时调整元素)

Answer 1

选项2是您最好的选择.

问题:我不知道,如何观察(和访问)控制器的属性.

Ember将在创建视图时设置视图的控制器属性,您可以使用它来访问控制器的属性.

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

我在这里发布了一个工作示例:http://jsbin.com/hitacomu/1/edit