Ember Js嵌套表单

Question

目前我有一个名为 "form A" 的表单，我已经为该表单创建了多个视图，包括编辑、创建和列表。我希望能够创建一个名为 "form B" 的表单，它将通过 "form A's ID" 作为父 ID。使我能够在 "form A"（基本的一对多关系）下获得所有表单 B 的列表。所以目前在我的 "form A" 列表下，每个项目都有这个 link：

{{#link-to 'form-a.form-b.listing' form-a.id}} <!--Link to a controller -->
      <span class="btn btn-primary"> form b </span> 
{{/link-to}}

这也是我的路由器

 this.route('form-a', function() {
    this.route('new');
    this.route('listing');
    this.route('edit', {path: '/edit/:form-a_id' });
    this.route('form-b', function() {
      this.route('listing', {path: '/listing/:form-a_id'});
      this.route('new');
    });
  });

所以我正在尝试通过 form-a 的 Id 获取列表。但是我有点卡在这里，因为我不确定下一步该怎么做以及如何正确地通过列表控制器中的 "form a" ID 并将其用作每个 "form B" 的父 ID。有没有更好的方法来让嵌套表单具有太多关系，或者我正在以最好的方式处理它？

我遇到了编码瓶颈，希望有人能帮助解决这个问题。如果您需要任何说明，请询问，因为我知道我通常不擅长描述我的问题。

Answer 1

此 post 适用于 Ember 2.x.x 并自 2.15 起编写。

我认为对您有很大帮助的是 paramsFor()。

很难说 "right" 路由结构是什么，因为您的 UI 会在某种程度上决定一些事情，我不确定确切的 URL 有多重要。

这里是我将如何设置路线，假设会有多个表格 a。

  this.route('form-as', function() {
    this.route('form-a', {path: '/:form-a_id'}, function() {
      this.route('new');
      this.route('listing');
      this.route('edit');
      this.route('form-b', function() {
        this.route('listing', {path: '/listing'});
        this.route('new');
      });
    });
  });

在上面的代码中，表单 a 下的新建、列表和编辑将可以通过路由模型挂钩中的 params 访问表单 a id：

model(params) {
  console.log(params['form-a_id'])
  // using the [] accessor since dashes don't work for normal dictionary nav
}

在form b段，listing和new可以这样访问form-a参数：

model() {
  console.log(this.paramsFor('form-as.form-a'))
}

注意那些破折号的 ID 和型号名称。它们很可能是 bug 的来源，我不能 100% 确定我在这里找到了它们。我避开他们。

有关 paramsFor() 的更多信息，请参阅 Reusing Route Context in the Guides and Dynamic Segments

Ember Js嵌套表单

Ember Js nested forms

forms

ember.js

ember-data