屬性視圖中的綁定不會根據模型更改進行更新

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