CODEWITHSUNDEEP
ember.js
Susai
Susai

Reputation: 565

How to clone template's model?

I am new to Ember and developing simple app that interact with user through form. If the user clicks 'reset' i want to reset the model to initial data.

To achieve this, i am cloning the model and set into the controller as 'oldModel'. If the user clicks reset i want to replace the model with oldModel.

jsbin: http://jsbin.com/EJISAne/673/edit

Please suggest me how can i achieve this by following the best practices.

Upvotes: 1

Views: 194

Answers (2)

Hyder
Hyder

Reputation: 1463

In your setupController , change this 

controller.set('oldModel', Ember.copy(model));

to 

controller.set('oldModel', Ember.copy(model,true));

The true option is the key here. It will make a deep clone of the object.

Also there was a typo in your template. 

<button action 'reset'>Reset</button>

should be 

<button {{action 'reset'}}>Reset</button>

Working jsbin.

EDIT : The earlier jsbin was also throwing the assertion. The assertion was thrown because, Ember.Object doesn't implement Ember.Copyable mixin as told in the exception.

In the method App.parseSource

arr.push(Ember.Object.create(item))

can be changed to just, 

arr.push(item)

This won't throw any exception as the check for implementation of copy will be done only for instances of Ember.Object

Update jsbin without exception

Upvotes: 1

kristjan reinhold
kristjan reinhold

Reputation: 2048

Ive implemented my reset like this

My ROUTE The "routeHasBeenLoaded" property now lets user to change routes, and come back to route without losing any data previously inserted. On the other hand no properties have to be set manually after "save, edit" e.g this.set('property1', []); after save is no needed. All you do is this.set('routeHasBeenLoaded', null);

 import RouteResetter from 'appkit/misc/resetmixin';
    export default Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin,  RouteResetter, {
      model : function(){
          var self = this;
          if(Ember.isNone(self.get('controller.routeHasBeenLoaded'))){
            return Ember.RSVP.hash({
              property1: this.store.findAll('das/dasdasfa'),
              property2: [],
            });
          } else {
            return;
          }
       }
    });

Controller on load

  routeHasBeenLoaded : null,

  init : function(){    
    this._super();
    this.set('routeHasBeenLoaded', true);
  },

RouteResetterMixin

export default Ember.Mixin.create({
  theModel: null,
  theModelFunction : null,

    afterModel : function(model){
      this._super();
      this.set('theModel', model);
      this.set('theModelFunction', this.model.bind(this));
    },
    actions : {
      triggerReset : function(){
        var self = this;
        this.get('theModelFunction')().then(function(resolvedModel){
            self.set('controller.model', resolvedModel);
            self.set('controller.routeHasBeenLoaded', true);
        });
      } 
    }

});

So im storing my inital model as well as model(); which i get in afterModel hook from parameter (model). And on reset, i reset the model to initial date. I hope this helps. Would like to see other solutions on that as well.

Upvotes: 0

Related Questions