Temporary Non-Persistent Record with Ember-Data 1.0.0-beta

3
votes

I'm new to Ember and Ember-data and am deciding whether to use Ember-Data or one of the other persistence libraries. In order to evaluate, I'm experimenting with writing a small Rails-backed app.

One of my routes can be considered similar to the Todo MVC app that is frequently used in examples.

In my template, I have a number of input fields that represent attributes within the model. Furthermore, I also have one element in the model that represents a hasMany relationship.

Models:

App.CompanyModel = DS.Model.extend
   company: DS.attr()
   desc: DS.attr()
   contacts:  DS.hasMany('company_contact')

App.CompanyContactModel = DS.Model.extend
   firstname: DS.attr()
   lastname: DS.attr()
   ...

Within my controller, I want to be able to create a new CompanyModel record (and by virtue, add one or more contacts models to it), but not have it appear within the controller's instance of the CompanyModel until I'm ready to do so.

Currently, when a user wants to add a new record, I have a component that calls an action in my controller as follows:

@set('new_company',
  @store.createRecord('company')
)

This actually works fine, except for one thing. My view has to populate the individual attributes within "new_company", which it does, however, the record is immediately added to the controller's model instance and appears in the list of records; I only want the newly created record to be visible in the table once a particular action has taken place.

Instead of instantiating new_company with createRecord, I could do something like this:

@set('new_company',
  Ember.Object.create
    companyname: ''
    desc: ''
    contacts: [
      firstname: ''
      lastname: ''
    ]
)

And then do a @store.createRecord('company', @get('new_company')), however, given I've already defined my attributes in the model, it doesn't feel very DRY to me.

I'm using Ember 1.5.0 and Ember-Data 1.0.0-beta.7.

It appears I'm not the first person to have this issue (create temporarty non persistent object in Ember-Data), but it appears that Ember-Data has sufficiently changed to make all of these solutions inoperable.

Thanks for your help!

1
ember.jsember-data
I'm confused by the use of the at symbol. I've seen @each, but I haven't seen @set or @store. – hourback
The @ symbol is shorthand for "this." in CoffeeScript. – JonnoT

1 Answers

5
votes

You're real issue is you're using what's considered a live collection. I'm going to assume in your route you've done something like this:

App.FooRoute = Em.Route.extend({
  model: function(){
    return this.store.find('company');
  }
});

find with no parameters says, hey Ember Data, find me all the records that are company. Well Ember Data shoots off a request to your back-end, then returns store.all('company'). all is a live collection that will always have all the records of that type currently in the store. In your case, you are saying I want to avoid any record that is new. There are a couple of ways to handle this.

Create a static list. (You'll need to manually add/remove objects to/from this list).

App.FooRoute = Em.Route.extend({
  model: function(){
    return this.store.find('company').then(function(companies){
      return companies.toArray();
    });
  }
});

Example: http://emberjs.jsbin.com/OxIDiVU/641/edit

Create a computed property that only shows records that aren't new

App.FooRoute = Em.Route.extend({
  model: function(){
    return this.store.find('company');
  }
});

App.FooController = Em.ArrayController.extend({
  savedRecords: function(){
    return this.get('model').filterBy('isNew', false);
  }.property('[email protected]')
  // shorthand this could be written like this
  // savedRecords: Ember.computed.filterBy('model', 'isNew', false)
});

Then in your template you would iterate over the computed property

{{#each item in savedRecords}}

{{/each}}

Example: http://emberjs.jsbin.com/OxIDiVU/640/edit