emberjs-RC2 render helper scope and action bubbling not allowing form to save

The jsfiddle.

From the posts#index template, I can create a new comment by using the #linkTo helper which goes to the PostNewComment Route and renders the post/newcomment form. If I click save the newly created comment is persisted using the 'save event' inside the PostNewComment Route.

You can uncomment the line below in post/comments" template, to see it working

{{#linkTo "post.newComment"}} Add comment{{/linkTo}}

I changed my UI to use a controller isAddingNew button and the render helper to determine When to display the form and now if I click the save button, I get:

Uncaught TypeError: Cannot call method 'one' of null

This how I render it:

<p> {{render "post.newComment" }} </p>

I suspect it is a scope issue because the error is only triggered when 'save' is clicked after using the render helper.

To reach the 'add new comment' button:

   click  -> post -> a post title -> click comments link -> add comment

Is there a way to make the 'Post/newComment form' displayed via the 'render helper' in the post/comments template to use the 'save event' defined in the PostNewComment Route. Right now clicking on the 'save button' which is defined in that form goes directly to the parent route ie PostCommentsRoute instead of going to its own route probably because I displaying the form via the render helper.

I thought calling 'save' should go to its own controller and then bubble to its own route where it is actually defined, before attempting to bubble up the hierarchy to the PostComments Route.

Solution

There's probably a few alternatives, but this works and is pretty idiomatic: http://jsfiddle.net/GabSY/4/

In particular:

{{#if model}}
     <form {{action save content on='submit'}}> 
    {{view Ember.TextArea valueBinding="content.body" placeholder="body"}}
    <button type="submit"> save comment </button> 
     <button {{action cancel}}> Cancel</button>
    </form>
{{else}}
    <button  {{action open}}> Add comment </button>
{{/if}}

The reason you were getting the Uncaught TypeError: Cannot call method 'one' of null error was that the PostNewCommentController's model was never set. What I ended up doing was using the open action on the PostNewCommentController to set the model of the controller, which can be used in a Handlebars {{if}} to determine whether the form should be displayed or not.

I prefer this approach to the alternative of setting content/model (they are aliases to each other) of the PostNewCommentController from within the PostCommentsRoute's setupController method because if you go down that route, it's easy to start mixing concerns between not-very-related controllers and routes. In my approach, all the logic for setting the content/model of the new comment takes place in the controller for new comments, which makes sense since a new comment no longer has its own route to initialize this data.