I'm trying to build a simple CRUD like EmberJS application that works on a single model.
My routes look like this currently:
Blog.ApplicationRoute = Ember.Route.extend()
Blog.Router.map ->
@route 'about'
@resource 'posts', ->
@route 'new'
@resource 'post', { path: '/:post_id' }, ->
@route 'edit'
Blog.PostsRoute = Ember.Route.extend
model: -> Blog.Post.find()
Blog.PostsNewRoute = Ember.Route.extend
model: -> Blog.Post.createRecord()
events:
save: ->
console.log @
@.get('currentModel').get('store').commit()
@.transitionTo('posts')
Blog.PostEditRoute = Ember.Route.extend
model: -> @modelFor('post')
events:
update: ->
@.get('currentModel').get('store').commit()
@.transitionTo('posts')
My HTML view contains some simple handlebars templates:
%script#about{type: "text/x-handlebars"}
%h2 About...
%script#posts{type: "text/x-handlebars"}
.row-fluid
.span4
%h4 Posts
%ul
= hb 'each model' do
%li
= hb 'linkTo "post" this' do
= hb 'title'
= hb 'linkTo "posts.new"' do
New Post
.span8
= hb 'outlet'
%script#post{type: "text/x-handlebars"}
%h2= hb 'title'
= hb 'body'
%p
= hb 'linkTo "post.edit" this' do
Edit
= hb 'outlet'
%script{id: 'posts/new', type: "text/x-handlebars"}
%h2 New Post
%p
= hb 'view Ember.TextField', valueBinding: 'title'
%p
= hb 'view Ember.TextArea', valueBinding: 'body'
%p
%button{hb: 'action "save"'}Save
%script{id: 'post/edit', type: "text/x-handlebars"}
%h2 Edit Post
%p
= hb 'view Ember.TextField', valueBinding: 'title'
%p
= hb 'view Ember.TextArea', valueBinding: 'body'
%p
%button{hb: 'action "update"'}Save
The index listing, new form and show template work as expected. As soon as I click the 'edit' button, I get the following error in the Javascript Console:
Uncaught RangeError: Maximum call stack size exceeded
I can access the edit route directly through my browser's location bar without any problems:
/#/posts/1/edit
The current layout structure would render the edit template just below the show template, corresponding to the nested routes I'm using.
The stacktrace looks like that:
contentPropertyDidChange
sendEvent
Ember.notifyObservers
propertyDidChange
ChainNodePrototype.chainDidChange
ChainNodePrototype.chainDidChange
ChainNodePrototype.didChange
chainsDidChange
propertyDidChange
contentPropertyDidChange
sendEvent
I'm quite clueless why the contentPropertyDidChange
event gets triggered by just clicking the edit button.