Ember.js update model when view changed?

Question

New to ember here and I thought if you bind the data between view and model then both side will sync up if one changed.

Currently I have my model setup with Emberfire which returns an array of colors:

App.ApplicationRoute = Ember.Route.extend({
    model: function() {
        return EmberFire.Array.create({
            ref: new Firebase("https://ember-starter.firebaseio.com/shape")
        });
    },
    setupController: function(controller, model) {
        controller.set('model', model);
    }
});

My template is setup as such:

<button {{action "add"}}>Draw</button>
{{#each controller}}
    {{#view App.ShapeView contentBinding="content"}}
    <div>{{color}}</div>
    {{/view}}
{{/each}}

I have a button to add new color to the array:

App.ApplicationController = Ember.ArrayController.extend ({
    actions: {
        add: function() {
        var newColor = {
          color: "#222222"
          };
          this.pushObject(newColor);

      }
    }
});

Within the view I setup a click action to set the color property:

App.ShapeView = Ember.View.extend({
      click: function() {
        var self = this;
        var changeColor = self.set('context.color', '#121212');
    }
  });

With the current setup, I'm able to fetch/display a list of colors and change the color to #121212 upon click. However the data doesn't persist to the model(firebase). I'm wondering if I did something wrong or there are better ways to save/sync changes between view and model.

thanks in advance!

Edu Edu · Accepted Answer · 2013-11-28T11:44:19

May be it is because you have a typo in your add function... this.pushObject(newColore); should be this.pushObject(newColor);

    add: function() {
    var newColor = {
      color: "#222222"
      };
      this.pushObject(newColor);

  }

Good luck

Ember.js update model when view changed?

1 Answers