1

次のハンドルバー スクリプトを実行したいと思います。

color:{{object.labelColor}} が機能していないようです (他の投稿を参照)。

1 つの解決策は、「javascript 側」で完全なスタイル属性をバインドするようですが、その側でスタイルの「固定」部分 (text-align:left) を管理することは避けたいと思います。

私のサンプルコード（js側の動的部分、htmlビューの固定部分）に似たものを作る解決策はありますか？

<div class="label" style="color:{{object.labelColor}};text-align:left">{{object.name}}</div>
4

2 に答える 2

3

「classNameBindings」を使用して、一連の CSS ルールを対応するクラスに定義できます。

JS

Ember.View.create({
 classNameBindings: ['isUrgent'] // array of class names
 isUrgent: true //conditional to set class name
});

CSS

.is-urgent{
 background-color: #356aa0;
}

リソース

http://emberjs.com/api/classes/Ember.ContainerView.html#property_classNameBindings

于 2013-01-07T18:58:33.443 に答える
0

クラスの代わりにスタイルを使用する必要があり$.css、一度にスタイル文字列の一部のみを変更したい場合、1 つの代替手段として を使用して、必要なスタイルの変更を適用します。例:

<script type="text/x-handlebars">
  <h1>App</h1>
  {{view App.SomeView}}
</script>

<script type="text/x-handlebars" data-template-name="some-view">
  <div style="color:#00F;text-align:left">
    Some View<br />
    <button {{action changeColor on="click"}}>Change Color</button>
  </div>
</script>

<script type="text/javascript">

App = Em.Application.create();

App.SomeView = Em.View.extend({
  templateName: 'some-view',
  changeColor: function(e) {
    console.log('changing color');
    this.$('div').css('color', '#F00');
  }
});

</script>

上記のスクリプトでは、jQuery の関数を使用して、セレクターがインスタンス内から返す要素cssの属性を変更しています (この場合、div が 1 つしかないため、要素をセレクターとして使用しています)。これを行うには他にも (おそらくもっと良い) 方法がありますが、これがお役に立てば幸いです。colorSomeView

このソリューションの問題は、style属性がどのプロパティにもバインドされていないため、属性の状態を維持できないことです。そのため、長期的にはクラスをバインドする方が良いと思います。

于 2013-01-08T15:15:55.330 に答える