Ember Uncaught RangeError: Maximum call stack size exceeded

Question

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.

Flo Flo · Accepted Answer · 2013-04-27T05:58:58

I found the answer in ember.js: stack overflow with a route

The trick is to build the edit route with model instead of this:

%script#post{type: "text/x-handlebars"}
  %h2= hb 'title'
  = hb 'body'
  %p
    = hb 'linkTo "post.edit" model' do
      Edit
  = hb 'outlet'

Ember Uncaught RangeError: Maximum call stack size exceeded

1 Answers