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!
