Action in handlebars template not firing

Question

I have the folowing simple code:

(JSFiddle) http://jsfiddle.net/aR2UX/3/

The action in the template will not fire no matter what I do. I'm suspicious it's due to the way the view is rendered, but no matter what I read, I can't wrap my head around it.

I'm still trying to understand ember views, but from what I've read my code in the fiddle should work. It doesn't seem to though, can anyone help me?

(This is in a rails 3.2 app, using ember-rails, ember 0.9.4 and the handlebars template gem, btw).

Any help is greatly appreciated as I took a bit of a risk on ember for this project.

Answer 1

Since the handlebars templates don't have names, they are inserted into the DOM at the point they are declared – this is why you see anything at all.

This:

{{#each content}}
{{view Skills.RecommendedSkillView skillBinding="this"}}
{{/each}}

Doesn't do anything for you since content is not defined at this point and the handlebars template is not associated with the view.

Likewise:

Skills.RecommendedSkillsListView = Ember.View.extend({
    templateName: 'app/templates/recommended_skills_list',

Doesn't help you since templateName is pointing to a non-existant handlebars template, and the view classes are never instantiated (otherwise you would get a warning of a missing template).

Furthermore:

<td><a href="#" {{action "a"}}>DO A THING</a></td>

Will not call the function a since again this template is just inserted once in the DOM where it is encountered and a is not defined in that context (neither is skill).

And finally, when you do get your code closer to work the way you intend, there will be a problem with that every handlebars template is, by default, wrapped in a div. Hence your table will have div around every tr. This is solved by changing the tagName: http://emberjs.com/#toc_36

Answer 2

This doesn't answer the OP's original problem, but it fits with the title, and if you have this problem, then search engines point you to this page. Here is one possible reason why actions might not fire: the tag might not be within the Ember Application's rootElement. So if you have JS

FooApp = Ember.Application.create({
  rootElement:"#foo",
  test: function() {
    alert("testing");
  }
});

and handlebars

<div id="foo"></div>
<a {{action "test" target="FooApp"}}>Fail</a>

Then nothing will happen. Had me baffled for hours.