如何在Ember.js的控制器中操作DOM？

Question

这里是一个场景：

在控制器初始化时加载数据。当加载完成后，我想根据加载的数据调整容器元素的大小。所以问题是，在控制器中如何访问视图？

我知道可以通过this.$()在视图中操作dom，但是如何在控制器中访问dom或者如何访问控制器中的视图。我在这里使用Ember.Router，因此不需要手动创建视图和控制器。 http://jsbin.com/oxudor/edit#javascript,html 我在这里展示了一些代码示例。该代码无法执行，但它可以展示我的问题。我在代码中标注了一些有问题的地方。

- aisensiy

Answer 1

我认为你不应该在控制器中操作dom，这会破坏MVC模式。也许一个解决方案是在视图中定义一个观察者，监听控制器的内容。在这个观察者中，然后可以操纵dom（你在视图中，所以没有问题）。

正如@pangratz建议的那样，提供一些代码可能会使我的回答更完整。

编辑：我认为你可以将轮播函数放在相关视图中，并观察控制器的loading属性。在这里，你可以使用this.$()来检索视图的jquery对象。

carousel: function() {
  var context = this.get('controller'), 
      self = this;

  if(context.get('loading') === false) {
    setTimeout(function() {
      var width = self.$('#page_wrapper').width(),
          num   = self.$('.page').size();
      self.$('#pages').width(width * num);
      self.$('.page').width(width);
      console.log([width, num]);
      console.log(context.get('elements'));
    }, 100);
  }
}.observes('controller.loading')

希望这能帮到你...

- sly7_7

Answer 2

现在你可以使用修饰符，安装Ember-midifier库并查看这个教程Ember-Modifiers

- Abderazak Amiar