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);
      }
    })
  })
});

我想在Field路线的Form中列出form s。这个Route是：

  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);
  }
})

这意味着在渲染视图时，outlet中的field_view.handlebars将与showField相关联：

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

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

如果我只有一个字段，然后点击(edit)，它会切换outlet与editField的连接，这是我到目前为止所要做的。但是，如果Field中有Form个(edit)，则当我按outlet时，它会将所有editField连接到router.get('fieldsListController').connectOutlet('showField', field);。

由于这个FieldView有意义，但我不知道如何获得控制器的正确实例（和/或为每个outlet s创建一个控制器实例

我在这里很丢失。我试图在不改变整个视图的情况下进行“内联编辑”，它似乎不是一个好的文档/教程，关于拥有一组视图，每个视图都有一个独立的{{1}} ......

整个代码库和在线实时版本的链接位于页面顶部。

Answer 1

您可能正在寻找正在开发中的{{control}}帮助程序，但可以在Ember.js source code中访问。设计此帮助程序，以便为每个使用此帮助程序实例化一个控制器。

如何管理具有独立渠道的视图集合？

1 个答案: