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

【问题标题】：access property of controller from within view从视图中访问控制器的属性
【发布时间】：2024-01-15 13:55:01
【问题描述】：

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

在控制器中有一个观察者，它在触发时设置元素的width。问题：AFAIK，无法从控制器内访问 DOM 元素，即就像您在视图 this.$('#progress') 中所做的那样。
在视图中有一个观察者，它观察控制器的属性。问题：我不知道如何观察（和访问）控制器的属性。
（通过{{bindAttr}} 将控制器的属性绑定到一个怪异的data-progress="42" 属性，并在属性值发生变化时调整元素width）

【问题讨论】：

标签： ember.js

【解决方案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

【讨论】：

控制器是视图？？
我第二次@Connor 的评论。我很困惑 ember 似乎更关心对象的名称，而不是类型，以连接其魔法。此外，jsbin 链接目前似乎没有做任何事情。
@PatrickM 抱歉打错了，应该是App.ProgressController = Ember.Controller.extend。 jsfiddle 也坏了，因为它引用了已经移动的 js 库。我已经更新了小提琴和我的答案，希望新版本更有帮助。
太好了，感谢关注！但我真正想知道的是，为什么当你将控制器作为Ember.View 时它仍然有效。
这是一个很好的问题，基本上它仍然有效，因为这是一个非常简单的例子。你是对的，Ember 并不关心你给它的对象类型，只是期望对象具有正确的功能。通常扩展 Ember.Controller 是有意义的，但您不必这样做。在这个简单的例子中，我们没有做很多“控制器”的事情（比如发送动作），所以 Ember.View、Ember.Object 或 Ember.Controller 中的任何一个都可以工作。但是一旦我们尝试做类似{{action submit}} 的事情，Ember.View 和 Ember.Object 版本就会中断。