1

我想做以下车把脚本：

color:{{object.labelColor}} 似乎不起作用（参见其他帖子）。

一种解决方案似乎在“javascript 端”绑定了完整的样式属性，但我想避免在该端管理样式的“固定”部分（文本对齐：左）。

有没有一种解决方案可以制作类似于我的示例代码的东西（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，应用您想要的样式更改。例如：

<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函数来更改color属性，无论我的选择器从SomeView实例中返回什么元素（在这种情况下，因为我只有一个 div，所以我使用该元素作为选择器）。还有其他（可能更好）的方法可以做到这一点，但我希望这会有所帮助。

这个解决方案的问题在于，你不能保持style属性的状态，因为它没有绑定到任何属性，这就是为什么我认为从长远来看绑定类会更好。

于 2013-01-08T15:15:55.330 回答