Sending an action to a view in Ember.js

Question

I have a view which contains a close button:

.flash-message
  div class="close-button" click="view.removeFlash"
  = view view.content.thisView

The view itself reads:

Whistlr.AlertView = Ember.View.extend
  templateName: "_alert"

  removeFlash: ->
    alert "Close!"

However, when I click on the "close-button" div, nothing happens. I've tried rewriting the button a few different ways:

click="view.removeFlash"
click="removeFlash"
click="removeFlash" target="view"

I've also tried placing the action directly in the controller (though I'm not even sure there is a controller for the view):

Whistlr.AlertController = Ember.ObjectController.extend
  removeFlash: ->
    alert "I work!"

None of these approaches work. Perhaps it's not even possible to send an action to the view like I would with a controller? If not, how else can I approach this problem?

score 4 · Accepted Answer · answered Jul 22 '13 at 03:54

4

The syntax for sending events to views is, {{action myEvent target="view"}}. Then a myEvent handler in the corresponding view can handle this event. Without the target the event will go to the controller in that view's context.

I suspect what is happening is that Emblem is putting the target attribute on the element itself rather than into the action handler. Since target is a valid attribute as well. You can confirm this by looking at the generated html in the Elements tab of dev tools.

Unfortunately I don't have a workaround with Emblem. But this stuff definitely works with Handlebars templates.

answered Jul 22 '13 at 03:54

Darshan Sawardekar

5,065
2
21
31

Thanks, that was the solution. As far as I can tell, there's no built-in syntax for this in Emblem.js, but there is a way to make explicit handlebars style declarations. Ultimately, I got it working with: `div{action removeFlash on="click" target="view"} class="close-button"` – nullnullnull Jul 22 '13 at 15:00
1

Looks like there is a built-in syntax, as described [here](https://github.com/machty/emblem.js/issues/84). It would look like this: `div class="close-button" click="removeFlash target='view'"` – nullnullnull Jul 22 '13 at 15:43
That's useful, Thanks for posting. – Darshan Sawardekar Jul 22 '13 at 16:36

score 1 · Answer 2 · answered Mar 13 '14 at 16:54

The correct code in Emblem would be click="removeFlash target='view'", you don't separate it into two properties.

Also in your controller/view you need to make removeFlash be part of the actions object.

Whistlr.AlertView = Ember.View.extend
  templateName: "_alert"

  actions:
    removeFlash: ->
      alert "Close!"

Sending an action to a view in Ember.js

2 Answers2