emberjs: when I try to use the action helper, i get - Handlebars error: Could not find property 'action' on object

Question

I have been trying to use the action helper with ember. I get the following error: Handlebars error: Could not find property 'action' on object.

I think I am following the examples in my simplified view here:

<script type="text/x-handlebars" data-template-name="user-edit">
    <p><a href="#" {{action "showUsersList"}}>Back</a></p>
</script>

The view object:

App.UserEditView = Ember.View.extend({
    templateName: 'user-edit',
    userBinding: 'App.usersController.selectedUser',
    tagName: 'span',
    didInsertElement: function () {
        $('h1').html('Edit User');
        document.title = 'Edit User';
    },
    showUsersList: function(event) {
        App.usersController.showUsersList();
    }
});

Any idea why I cannot use the action helper like in the examples?

Thanks, Robert

Answer 1

You can also simply create the view and append it to the document. You don't need the second handlebars template.

App.UserEditView = Ember.View.create({
    templateName: 'user-edit',
    userBinding: 'App.usersController.selectedUser',
    tagName: 'span',
    didInsertElement: function () {
        $('h1').html('Edit User');
        document.title = 'Edit User';
    },
    showUsersList: function(event) {
        App.usersController.showUsersList();
    }
}).append();

Answer 2

I trimmed out some of your app-specific logic, but got your action helper working in this fiddle

Handlebars :

<script type="text/x-handlebars" data-template-name="user-edit">
    <p><a href="#" {{action "showUsersList"}}>Back</a></p>
</script>

<script type="text/x-handlebars" >
  {{view App.UserEditView}}
</script>​

JavaScript :

App = Ember.Application.create({});

App.UserEditView = Ember.View.extend({
    templateName: 'user-edit',
    tagName: 'span',
    showUsersList: function(event) {
        alert('hi');
    }
});​