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

我的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**  
       }
   }    
});

App.MyView=Ember.View.extend({
行动：{
不管什么：函数（）{
var ctrl=this.get（'controller'）；
ctrl.set（'property'，value）；//通过视图设置控制器属性的任意示例
ctrl.controllerMethod（）；//通过视图调用控制器方法
**//执行一些DOM操作**
}
}    
});

当然，我可以将我在视图中执行的任何与控制器相关的步骤包装在控制器方法中，并通过视图调用该方法，但我认为这同样难看。视图不应该像我这样真正调用控制器方法。不幸的是，此特定操作需要DOM操作以及设置ome状态并在控制器中执行操作

---

我不知道推荐的执行方法是什么。有人能给我一些启发吗？

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

因此，您只需从视图助手中省略

target=“view”

参数，Ember将在最近的控制器中查找正确的操作，一直冒泡到路由，依此类推

一个简单的代码片段（包含您在第一篇文章中提供的内容）如下所示：

把手模板：

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

开火！

余烬控制器：

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

---

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

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

---

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

您能描述DOM操作吗？理想情况下，DOM更改将由数据绑定b触发ecause controller状态已更改。非常有趣，本质上类似这样：“添加”或“删除”视图。这些视图是由阵列控制器支持的集合视图的一部分。状态正在阵列控制器中设置。视图由阵列控制器中可用的内容动态生成。请注意：当状态是在array controller中设置的，内容没有被删除或添加。我不完全明白；也许你可以制作一个jsbin来说明？谢谢@herom。但是上面的解决方案非常基本，我到达了@target=“view”当我意识到这个任务需要在控制器和视图之间来回执行时。我没有尝试过这个，但直觉上它似乎是正确的