mercredi 3 juin 2015

Model Property Binding in Ember / Ember-Data

Is there a recommended approach or pattern to the following application flow?

  1. User enters a route
  2. Model for route is retrieved and presented to the user via the template.
  3. The template inputs are bound to model properties so as the user modifies them, the data in the store is updated on the fly.
  4. The user navigates away from the route without hitting "Save"

The problem I'm seeing is that model has retained the values changed by the user, though they haven't been persisted to the backend.

My current approach to the problem is this and it feels very clunky:

In the setupController hook, I set several default property values from the model using Ember.copy to break the binding:

setupController: function(controller, model) {
    this._super(controller, model);

    var goals = model.get('goals');

    controller.set('goalOne', Ember.copy(defaultGoal.get('goalOne')));
    controller.set('goalTwo', Ember.copy(defaultGoal.get('goalTwo')));
    controller.set('goalThree', Ember.copy(defaultGoal.get('goalThree')));
}

Bind my inputs to those values instead:

{{input value=goalOne type='text'}}

When clicking save, call an updateModel() method that sets those values back to the model and persists to the backend.

updateModel: function() {
    var model = this.get('content');
    model.set('goalOne', this.get('goalOne');
    model.set('goalTwo', this.get('goalTwo');
    model.set('goalThree', this.get('goalThree');
}

actions: {
    save: function() {
        this.updateModel();
        this.get('content').save();
    }
}




Aucun commentaire:

Enregistrer un commentaire