attributeBindings in a View aren't updating based on model change - ember.js

Question

I wonder if I'm just doing something fundamentally wrong here but I'm trying to have a model define the style attribute in a view. So for example the ember view uses the card template and starts out with <div style="color: green">...</div> that is backed by the model property color. When I change it somewhere else via App.Card.find(2).set("color", "color: red").save() I expect the template to update the value, but it does nothing. Using {{ bindAttr style model.color }} in the template directly does keep the value in sync, but then I have an extra ember-view div element.
http://jsfiddle.net/dbhWg/3/
javascript:
App = Ember.Application.create();
App.Store = DS.Store.extend({
adapter: 'DS.FixtureAdapter'
});
App.Router.map(function () {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function () {
return App.Card.find()
}
});
App.Card = DS.Model.extend({
color: DS.attr('string'),
});
App.Card.FIXTURES = [{
id: 1,
color: "color: green"
}, {
id: 2,
color: "color: blue"
}];
App.CardView = Ember.View.extend({
templateName: "card",
attributeBindings: ['style'],
style: function () {
return this.get('controller.model.color')
}.property('controller.model'),
didInsertElement: function () {
App.Card.find(2).set('color', "color: red").save()
console.log(App.Card.find(2).get('color'))
}
});
templates:
<script type="text/x-handlebars" data-template-name="card">
<h1> HELLO THERE </h1>
</script>
<script type="text/x-handlebars">
<h2> Welcome to Ember.js </h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#each item in model}}
{{render "card" item}}
{{/each}}
</script>

Answer 1

You forgot to add the dependecency for the color in computed property
style: function () {
return this.get('controller.model.color')
}.property('controller.model.color'),
Working Fiddle
As far as I know, you can't update CSS using bindAttr what I'd suggest you to use class instead, define classes as follows:
.red{
color: red;
}
.green{
color: green;
}
.blue: {
color: blue;
}
The update fixtures as:
App.Card.FIXTURES = [{
id: 1,
color: "green"
}, {
id: 2,
color: "blue"
}];
Bind the color to class as follows
App.CardView = Ember.View.extend({
templateName: "card",
classNameBindings: ['color'],
color: function () {
return this.get('controller.model.color');
}.property('controller.model.color'),
didInsertElement: function () {
App.Card.find(2).set('color', "red").save();
console.log(App.Card.find(2).get('color'));
}
});