How to use Ember.js {{action}} in Handlebars.js templates on top of Jade

Question

I'm using Ember.js and Handlebars.js for a project I'm working on at the moment. Server-side is Node.js + express and I make use of the Jade templating engine.

Now, whenever I want to tie actions to DOM elements, I use the {{action}} attribute of Ember.js. Currently, this is how my code looks in Jade:

script(type='text/x-handlebars', data-template-name='frontpage')
  div.logo(''='{{action goToFrontpage}}')

The above does work, however, the ''='{{action goToFrontpage}}' part seems somewhat hackish.

Is there any other way of doing this? Perhaps a best-practice when combining Ember.js, Handlebars.js, and Jade?

Answer 1

Sometimes it's better to just use html in Jade.

<div {{action GoToFrontpage}} class="logo"></div>

An other example I see a lot is the strong tag.

 .stuff
   | This is an
   strong important
   | message.

You can write this

 .stuff This is an <strong>important</strong> message.

I find the second a lot more readable and concise.