An aesthetic or correct way of invoking an action that requires DOM manipulation as well as controller related tasks in EmberJS

Question

My EmberJS app has a couple of actions (triggered by buttons) that require a view/DOM manipulation as well as setting a state in the controller, followed by a model update. The way I do this, it does not appeal to my programming aesthetics. It gets the job done, but it doesn't look good :(

Here is a gist of how I do things :

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

Naturally, I can wrap whatever controller related steps I am performing in the view in a controller method and invoke that method through the view, but IMO that's just equally ugly. The view shouldn't really be invoking a controller method like how I have done. Unfortunately, this specific action requires a DOM manipulation as well as setting some state and performing an action in the controller.

I am not sure what is the recommended way of performing this. Can anyone enlighten ?

Answer 1

I suggest you handle the action from the controller. I noticed you're setting a property. You can use that to signal something to the view and then do the DOM manipulation within the view.

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

The way I think about it is that UI 'actions' are mapped to a business event (e.g. addClient instead of click), then as a result of that something happens that could change properties of the model, controller. As a result of those changes the view might need to update directly, ideally through a binding, but sometimes is needed to modify the DOM manually.

Answer 2

as @LukeMelia said in his comment you should really handle the changes in your controller and update your view (if you need to?) via databinding.

so, you would just omitt the target="view" argument from your view helper and Ember will look for the proper action in the nearest controller, bubbling all the way up to the route, and so on.

a simple code snippet (with what you provided in your first post) would look like:

Handlebars Template:

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