属性视图中的绑定不会根据模型更改进行更新

Question

我在想我是否在这里做了一些根本性错误，但我试图让模型在视图中定义样式属性。因此，例如，该烬视图使用该卡片模板，并从<div style="color: green">...</div>开始，该模板由模型属性颜色支持。当我通过App.Card.find(2).set("color", "color: red").save()在其他地方更改它时，我期望模板更新值，但它什么都不做。在模板中直接使用{{ bindAttr style model.color }}会保持同步的值，但是我有一个额外的ember-view div元素。

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')) 
    } 
}); 

模板：

<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

你忘了加上dependecency的颜色在计算财产

style: function() { 
    return this.get('controller.model.color') 
}.property('controller.model.color'), 

Working Fiddle

据我所知，你不能使用 bindAttr更新CSS什么 我建议你使用类代替，类定义为如下：

.red{ 
    color: red; 
} 

.green{ 
    color: green; 
} 

.blue: { 
    color: blue; 
} 

更新灯具为：

App.Card.FIXTURES = [{ 
    id: 1, 
    color: "green" 
}, { 
    id: 2, 
    color: "blue" 
}]; 

绑定的颜色class如下

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')); 
    } 
});