I'm using Ember 2.0 with ember-data 2.0.
In Rails it's very common to model forms and components using real instances of models. For a posts/new form you would pass in a Post.new and use that inside the form.html.erb template.
In Ember that is made difficult because calling new Post creates a broken model. Instead you're encouraged to use stores, and with that use this.store.createRecord('post');.
This is fine, but not when building isolated components. For example a form where the user can add multiple models, say a category creator. In my head the structure would be something as follows:
category-form/template.hbs
<button {{action 'addCategory'}}>Add category</button>
{{#each categories as |category|}}
{{input value=category.name}}
{{/each}}
<button {{action 'save'}}>Save</button>
Then the component.js would be something like:
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"));
}
}
});
The example above does work, but would instead require this.store.createRecord. But as far as I know the component does not have access to the store. This is sane because that would be the component messing with a global state. Also when using createRecord you end up with lots of residual models in the store if the user navigates away without saving the model.
I want the category-form component in this example to be completely isolated from the rest of the global state.
My question is, how would this be handled correctly using ember logic?
Aucun commentaire:
Enregistrer un commentaire