0

ここで何か根本的に間違っているのではないかと思いますが、モデルにスタイル属性をビューで定義させようとしています。たとえば、ember ビューは card テンプレートを使用し<div style="color: green">...</div>、モデル プロパティ color に裏打ちされたものから始めます。テンプレートを介して別の場所に変更すると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>
4

1 に答える 1

1

計算されたプロパティに色の依存関係を追加するのを忘れました

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

働くフィドル

私の知る限り、代わりにクラスを使用することをお勧めする方法を使用して 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'));
    }
});
于 2013-05-29T06:34:57.907 に答える