ember.js - 从视图中访问控制器的属性

Question

我想做一个进度条之类的东西，它将由 ember 控制。所以在我看来，有两种方法可以实现这一点：

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