mercredi 16 septembre 2015

Creating instances of Ember models not attached to a store

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