Question

I have a list of clients displayed through a ClientsController, its content is set to the Client.find() i.e. a RecordArray. User creates a new client through a ClientController whose content is set to Client.createRecord() in the route handler.

All works fine, however, while the user fills up the client’s creation form, the clients list gets updated with the new client record, the one created in the route handler.

What’s the best way to make RecordArray/Store only aware of the new record until the record is saved ?

UPDATE:
I ended up filtering the list based on the object status

{{#unless item.isNew}} Display the list {{/unless}}

UPDATE – 2
Here’s an alternative way using filter, however the store has to be loaded first through the find method, App.Client.find().filter() doesn’t seem to behave the way the two methods behave when called separately.

// Load the store first     
App.Client.find();
    var clients = App.Client.filter(function(client){            
        console.info(client.get('name') + ' ' + client.get('isNew'));  
        return !client.get('isNew');
    });                   
    controller.set('content',clients);  

Answer 1

Few ways to go about this:

First, it’s very messy for a route/state that deals with a list of clients to have to go out of its way to filter out junk left over from another unrelated state (i.e. the newClient state). I think it’d be way better for you to delete the junk record before leaving the newClient state, a la

if(client.get("isNew")) {
  client.deleteRecord();
}

This will make sure it doesn’t creep into the clientIndex route, or any other client list route that shouldn’t have to put in extra work to filter out junk records. This code would ideally sit in the exit function of your newClient route so it can delete the record before the router transitions to another state that’ll called Client.find()

But there’s an even better, idiomatic solution: https://gist.github.com/4512271

(not sure which version of the router you’re using but this is applicable to both)

The solution is to use transactions: instead of calling createRecord() directly on Client, call createRecord() on the transaction, so that the new client record is associated with that transaction, and then all you need to do is call transaction.rollback() in exit — you don’t even need to call isNew on anything, if the client record was saved, it obviously won’t be rolled back.

This is also a useful pattern for editing records: 1) create a transaction on enter state and add the record to it, e.g.

enter: function(router, client) {
     this.tx = router.get("store").transaction();
     this.tx.add(client); 
},

then the same sort of thing on the exit state:

exit: function(router, client) {
     this.tx.rollback();
},

This way, if the user completes the form and submits to the server, rollback will correctly/conveniently do nothing. And if the user edits some of the form fields but then backs out halfway through, your exit callback will revert the unsaved changes, so that you don’t end up with some dirty zombie client popping up in your clientIndex routes display it’s unsaved changes.