Should this go in my Ember View or Ember Controller?

Question

I have an ember view, called picker, which is responsible for detecting click and mouseMove events on a div. Those events, when detected, send the respective calls to the corresponding controller.

export default Ember.View.extend({
    templateName: 'picker',
    click: function (event) {
         this.get('controller').send('addColor', event);
    },
    mouseMove: function (event) {
         this.get('controller').send('updateColor', event);
    }
});

My app requires that I perform some logic using the pageX and pageY properties of the event object and also determine some scaling factors using the properties of the div (offset, width, height etc.).

Where should that work be done? Should it all be contained within the view and just passed through to the action methods as parameters or should I pass the event object through and make it a responsibility of the controller? My gut says the former...

Things having to do with the display, the DOM, the screen, events, sizes, layout etc. should be in the view/component. — user663031

tikotzky tikotzky · Accepted Answer · 2014-12-08T03:18:29

This sounds like it should be wrapped in a component.

You can wrap the mouseMove and click event handlers in the component and the controller can pass in the actions to call when those events fire. for example you can have a component like

export default Ember.Component.extend({
    click: function (event) {
         this.sendAction('click');
    },
    mouseMove: function (event) {
         this.sendAction('mouseMove');
    }
});

and the in the template you would use it like

<div>
  {{#x-picker click="addColor" mouseMove="updateColor"}}
    <span> Track mousemove and click in here </span>
  {{/x-picker}}
</div>

Should this go in my Ember View or Ember Controller?

1 Answers