Ember.js绑定到组件/视图样式属性

Question

我正在尝试创建一个组件，或者如果更适合此功能，则可以相应地绑定到Model的计算属性并相应地更改样式属性。我正在使用ember应用程序套件，如果这会影响到应该如何完成的情况下。

该组件将是一个仪表，该仪表具有2个计算的属性以绑定到：" limitdeg"，" CurrentValueDeg"。每个将使用此组件的模型实例都可以将其作为模型计算的属性提供给组件。

仪表具有3个重叠的divs-"。" .meter-div"仅是没有绑定的背景，其中一个将用X-Degrees旋转CSS3转换，以显示当前的" ligitdeg"。因此，调整"变换：旋转（### deg）;是这里的关键。有一个"指标div"，这是简单的指示器，它基于CSS3动画循环的" CurrentValueDeg"类似地旋转。

以下是我如何看待具有组件/视图的基本粗略概述：

<div class="my-component-container">
    <div class="limit-div"></div>
    <div class="meter-div"></div>
    <div class="indicator-div"></div>
</div>

...我会这样使用它：例如： {{＃每个}} ... {{my-component}}} ... {{{/每个}}

1）我希望该组件与模型结合，因此，当" limitdeg"计算属性变化时，" .limit-div"将通过x-Degrees旋转，x-degrees具有CSS3变换：旋转（###）学位）;。

2）我想用无限循环的CSS3动画对" .indicator-div"进行动画动画，与CurrentValueDeg ComputedProperty结合。

这是我什至应该尝试使用一个组件/视图执行此操作，还是在一个部分中进行多个组件/视图？

Answer 1

如果您使用的把手，只需将您的组件包装在标签中，以指定它：

<script type='text/x-handlebars' data-template-name='components/component_name'>
  <div class="limit-div"></div>
  <div class="meter-div"></div>
  <div class="indicator-div"></div>
</script>

然后将其包含在您的视图中：

{{component_name objectToPassIn=this classNames='my-component-container' tagName='div'}}

如果您希望组件显示模型属性，则可以在组件内执行类似的操作（使用上面的示例中的变量）：

<span class='property-wrapper'>
  {{objectToPassIn.objectProperty}}
</span>

编辑：

为了清楚起见，objectToPassIn是传递给调用组件的视图的模型。