ember.js - 独立したアウトレットを持つビューのコレクションを管理する方法は?

Question

• コードはこちら: https://github.com/midu/form_builder/
• ライブ版: http://midu.github.com/form_builder/#/forms

ビューを数回レンダリングするときに、それぞれをコントローラーのインスタンスに関連付ける方法はありますか?

それが正しい方法ではないことは確かなので、私はそれをどのように行うべきかについての指示を受け入れています. しかし、ここにユースケースがあります：

私はこれらのルートを持っています:

FormBuilder.Router = Ember.Router.extend({
  // ...
  form: Ember.Route.extend({
    route: '/form/:form_id/edit',
    connectOutlets: function (router, form) {
      router.get('applicationController').connectOutlet('editForm', form);
      router.get('editFormController').connectOutlet( 'fieldsList', form.get('fields') );
    },

    editField: Ember.Route.transitionTo('editOneField'),
    showField: Ember.Route.transitionTo('showOneField'),

    initialState: 'showOneField',
    editOneField: Ember.Route.extend({
      connectOutlets: function (router, field) {
        router.get('fieldsListController').connectOutlet('editField', field);
      }
    }),
    showOneField: Ember.Route.extend({
      connectOutlets: function (router, field) {
        router.get('fieldsListController').connectOutlet('showField', field);
      }
    })
  })
});

ルートの aにFieldsをリストしようとしています。これは次のとおりです。FormformRoute

  form: Ember.Route.extend({
    route: '/form/:form_id/edit',
    connectOutlets: function (router, form) {
      router.get('applicationController').connectOutlet('editForm', form);
      router.get('editFormController').connectOutlet( 'fieldsList', form.get('fields') );
    },

EditFormViewテンプレートをレンダリングしedit_form_viewます:

<h2>Editing form {{id}}</h2>

{{view FormBuilder.AddFormFieldsView}}

{{ outlet }}

を に接続outletしfieldsListます。fields_listこれによりテンプレートがレンダリングされFieldsListController、配列であるコントローラーに接続されFieldます。

{{! fields_list.handlebards }}
<p>The form fields</p>

<ul>
{{#each content}}
  {{view FormBuilder.FieldView}}
{{/each}}
</ul>

したがって、これはテンプレートFieldViewを使用するビューをレンダリングします。field_view

# {{publicName}}

{{outlet}}

そして、これは私が問題を抱えているところです。outletの一部であるため、これを実際に「接続」することはできませんfieldsListController。

私がやろうとしていることを説明します。私はこれをコントローラーに持っています。

editField: Ember.Route.transitionTo('editOneField'),
showField: Ember.Route.transitionTo('showOneField'),

initialState: 'showOneField',
editOneField: Ember.Route.extend({
  connectOutlets: function (router, field) {
    router.get('fieldsListController').connectOutlet('editField', field);
  }
}),
showOneField: Ember.Route.extend({
  connectOutlets: function (router, field) {
    router.get('fieldsListController').connectOutlet('showField', field);
  }
})

これは、ビューをレンダリングするときに、outletinfield_view.handlebarsが次のように接続されることを意味しshowFieldます。

<pre>show a field yo :)</pre>

<a {{action editField this}}>(edit)</a>

フィールドが 1 つしかなく、 をクリックすると、これまでのところ、私がやろうとしていること(edit)と接続が切り替わります。ただし、 に複数ある場合、を押すと、すべての が に接続されます。outleteditFieldFieldForm(edit)outleteditField

this のおかげで理にかなってrouter.get('fieldsListController').connectOutlet('showField', field);いますが、コントローラーの適切なインスタンスを取得する方法がわかりません（および/または各FieldViews.

私はここでかなり迷っています。ビュー全体を変更せずに「インライン編集」を行おうとしていますが、それぞれが独立したビューのコレクションを持つことについては、適切なドキュメント/チュートリアルではないようですoutlet...

コード ベース全体とオンライン ライブ バージョンへのリンクは、ページの上部にあります。