0

単一のモデルで動作する EmberJS アプリケーションのような単純な CRUD を構築しようとしています。

現在、私のルートは次のようになっています。

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 ビューには、いくつかの単純なハンドルバー テンプレートが含まれています。

%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 コンソールに次のエラーが表示されます。

Uncaught RangeError: Maximum call stack size exceeded

問題なく、ブラウザのロケーション バーから編集ルートに直接アクセスできます。

/#/posts/1/edit

現在のレイアウト構造では、使用しているネストされたルートに対応して、ショー テンプレートのすぐ下に編集テンプレートが表示されます。

スタックトレースは次のようになります。

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

contentPropertyDidChange編集ボタンをクリックするだけでイベントがトリガーされる理由がまったくわかりません。

4

1 に答える 1

1

ember.jsで答えを見つけました: ルートによるスタック オーバーフロー

model秘訣は、代わりに編集ルートを構築することですthis:

%script#post{type: "text/x-handlebars"}
  %h2= hb 'title'
  = hb 'body'
  %p
    = hb 'linkTo "post.edit" model' do
      Edit
  = hb 'outlet'
于 2013-04-27T05:58:58.843 に答える