2

Ember-data 2.0 で Ember 2.0 を使用しています。

Rails では、モデルの実際のインスタンスを使用してフォームやコンポーネントをモデル化することは非常に一般的です。フォームの場合、posts/newを渡してテンプレートPost.new内で使用します。form.html.erb

new PostEmber では、呼び出しによって壊れたモデルが作成されるため、これは困難になります。代わりに、ストアを使用することをお勧めします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

あなたが書いたものはすべて正しいものであり、それは良いパターンと見なされます.

あなたの例ではstore、 in component をまったく使用する必要はありません。親に送信されるアクション実行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 に答える