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?

I've come to the conclusion that perhaps using regular HTML in Jade is the way to go. Thus, the answer would be to write `
` since Jade also supports regular HTML. — Kasper Tidemann, Jul 27 '12 at 13:53

score 7 · Accepted Answer · answered Jul 29 '12 at 12:38

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.

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

1 Answers1