Ember Uncaught RangeError:超出最大调用堆栈大小 [英] Ember Uncaught RangeError: Maximum call stack size exceeded

问题描述

我正在尝试构建像EmberJS应用程序这样的简单CRUD，可在单个模型上使用.

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')

我的HTML视图包含一些简单的车把模板:

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

索引列表，新表单和显示模板按预期工作.单击编辑"按钮后，在Javascript控制台中出现以下错误:

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

当前布局结构将在show模板下方显示编辑模板，与我正在使用的嵌套路线相对应.

The current layout structure would render the edit template just below the show template, corresponding to the nested routes I'm using.

stacktrace看起来像这样:

The stacktrace looks like that:

contentPropertyDidChange
sendEvent
Ember.notifyObservers
propertyDidChange
ChainNodePrototype.chainDidChange
ChainNodePrototype.chainDidChange
ChainNodePrototype.didChange
chainsDidChange
propertyDidChange
contentPropertyDidChange
sendEvent

我完全不知道为什么只需单击编辑按钮即可触发 contentPropertyDidChange 事件.

I'm quite clueless why the contentPropertyDidChange event gets triggered by just clicking the edit button.

推荐答案

我在诀窍是使用 model 而不是 this 来构建编辑路径:

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:超出最大调用堆栈大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！