在 EmberJS 中调用需要 DOM 操作以及控制器相关任务的操作的美观或正确方式

Question

我的 EmberJS 应用程序有几个动作（由按钮触发），这些动作需要视图/DOM 操作以及在控制器中设置状态，然后是模型更新。我这样做的方式并不符合我的编程美学。它完成了工作，但看起来不太好:(

这是我做事的要点：

<button {{action 'whatever' target='view'}}></button>

App.MyView = Ember.View.extend({

   actions:{
       whatever:function(){
         var ctrl = this.get('controller');
         ctrl.set('property',value); // arbitrary example of setting a controller property through it's view
         ctrl.controllerMethod(); // invoking a controller method through the view
         **// do some DOM manipulation**  
       }
   }    
});

当然，我可以将我在视图中执行的任何与控制器相关的步骤包装在控制器方法中，并通过视图调用该方法，但 IMO 这同样丑陋。视图不应该真的像我所做的那样调用控制器方法。不幸的是，这个特定的动作需要一个 DOM 操作以及设置一些状态并在控制器中执行一个动作。

我不确定执行此操作的推荐方式是什么。任何人都可以开导吗？

Answer 1

我建议您处理来自控制器的操作。我注意到你正在设置一个属性。您可以使用它向视图发出信号，然后在视图中执行 DOM 操作。

App.MyView = Ember.View.extend({
   function () {
     **// do some DOM manipulation**  
   }.observe('controller.property'); 
});

我的想法是 UI 的“动作”被映射到一个业务事件（例如 addClient 而不是点击），然后发生一些可能会改变模型、控制器的属性的事情。由于这些更改，视图可能需要直接更新，最好是通过绑定，但有时需要手动修改 DOM。

Answer 2

正如@LukeMelia 在他的评论中所说，您应该真正处理控制器中的更改并通过数据绑定更新您的视图（如果需要？）。

所以，您只需从视图助手中省略 target="view" 参数，Ember 就会在最近的控制器中寻找正确的操作，一直冒泡到路由，等等。

一个简单的代码 sn-p（使用您在第一篇文章中提供的内容）如下所示：

车把模板：

<button {{action someAction}}>Fire!</button>

Ember.Controller：

App.MyController = Ember.ObjectController.extend({
  myProperty: 'cool',

  printMyCoolness: function () {
    console.log("I'm using Ember.js!");
  },

  actions: {
    someAction: function () {
      this.set('myProperty', 'set on fire!');
      this.printMyCoolness();
    }
  }
});