創建未連接到商店的Ember模型的實例

Question

我使用Ember 2.0和ember-data 2.0。

在Rails中這是很常見的模型使用的模型實際實例的形式和組成部分。對於posts/new表單，您可以傳遞Post.new並將其用於form.html.erb模板中。

在灰燼這是困難，因爲調用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成分是從全局狀態的其餘部分完全隔離。

我的問題是，怎麼會變成這樣使用燼邏輯正確處理？

Answer 1

所有你寫的是正確的，它被認爲是一個很好的模式 - 你的組件，而不必存儲和他們的一些家庭工作（最好途徑，但可能是控制器）是處理這些數據持久化到API。

在你的榜樣，你不必在所有組件使用store。您可以在每個addCategory動作執行中創建一些Ember.Object實例，並將其發送給您的父級。此父級將獲得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') }); 
    }); 
    } 
} 

在另一方面，如果你需要灰燼數據模型的關係的一些功能，你可以實際發送的動作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 
     } 
    }