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

Question

我想知道我是否只是在这里做一些根本错误的事情，但我试图让一个模型在视图中定义样式属性。因此，例如 ember 视图使用卡片模板并从<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

您忘记在计算属性中添加颜色的依赖关系

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

工作小提琴

据我所知，您不能使用我建议您改用 class 来更新 CSS bindAttr，请按如下方式定义类：

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