2

我将 Ember 2.0 与 ember-data 2.0 一起使用。

在 Rails 中，使用模型的真实实例对表单和组件进行建模是很常见的。对于posts/new表单，您将传入 aPost.new并在form.html.erb模板中使用它。

在 Ember 中，这很困难，因为调用new Post会创建一个损坏的模型。相反，我们鼓励您使用商店，并且使用this.store.createRecord('post');.

这很好，但在构建独立组件时就不行了。例如，用户可以添加多个模型的表单，例如类别创建者。在我看来，结构如下：

category-form/template.hbs

<button {{action 'addCategory'}}>Add category</button>
{{#each categories as |category|}}
    {{input value=category.name}}
{{/each}}
<button {{action 'save'}}>Save</button>

然后 component.js 会是这样的：

category-form/component.js

import Ember from 'ember';
import Category from 'app/category/model';

export default Ember.Component.extend({
    categories: [],

    actions: {
        addCategory() {
            // THIS DOES NOT WORK
            this.get("categories").pushObject(new Category);
        },

        save() {
            this.sendAction("saveCategories", this.get("categories"));
        }
    }
});

上面的示例确实有效，但需要this.store.createRecord. 但据我所知，该组件无权访问商店。这是理智的，因为那将是与全局状态混淆的组件。此外，createRecord如果用户在不保存模型的情况下导航离开，那么在使用时，您最终会在商店中留下大量剩余模型。

我希望category-form此示例中的组件与全局状态的其余部分完全隔离。

我的问题是，如何使用 ember 逻辑正确处理这个问题？

4

1 回答 1

6

你写的都是正确的，它被认为是一个很好的模式——你的组件在没有存储的情况下工作，它们的一些父级（最好是路由，但可能是控制器）正在处理将这些数据持久化到 API。

在您的示例中，您根本不必store在组件中使用。Ember.Object您可以在每个动作执行上创建一些实例，这些实例addCategory将发送给您的父级。该父级将获取 的数组Ember.Object，将您要使用的属性复制到模型实例并保存它们。

import Ember from 'ember';

export default Ember.Component.extend({
    categories: [],

    actions: {
        addCategory() {
            this.get("categories").pushObject(Ember.Object.create({
                name: ''
            });
        },

        save() {
            this.sendAction("saveCategories", this.get("categories"));
        }
    }
});

在您的路线中，您可以执行以下操作：

actions: {
  saveCategories(categories) {
    let categoryRecords = categories.map((item) => {
      return this.store.createRecord('category', { name: item.get('name') });
    });
  }
}

另一方面，如果您需要 Ember Data 模型的某些功能作为关系，您实际上可以将操作发送addCategory到路由/控制器，创建模型并作为绑定传递到该组件：

{{category-form categories=categories saveCategories="saveCategories" addCategory="addCategory}}

然后在您的路线/控制器中：

   categories: [], 
   actions: {
      addCategory() {
        this.get('categories').pushObject(this.store.createRecord('category'));
      },
      saveCategories() {
        this.get('categories')... // do what you want with them
      }
    }
于 2015-09-16T10:20:57.123 回答