css - Ember.js 绑定(bind)到组件/ View 样式属性

Question

我正在尝试创建一个组件，或者一个 View (如果更适合的话)，它绑定(bind)到给定模型的计算属性并相应地更改样式属性。如果无论如何影响应该如何完成，我正在使用 Ember App Kit。

该组件将是一个仪表，具有 2 个要绑定(bind)的计算属性:“limitDeg”、“currentValueDeg”。每个将使用此组件的模型实例都可以将这些作为模型计算属性提供给组件。

仪表有 3 个重叠的 div - “.meter-div”只是没有绑定(bind)的背景，其中之一将使用 CSS3 变换旋转 X 度以显示当前的“limitDeg”。所以调整“变换:旋转(###deg)；”是这里的关键。有一个“indicator-div”，这是一个简单的指示器，它基于带有 CSS3 动画循环的“currentValueDeg”进行类似的旋转。

下面是我对组件/ View 的想法的基本粗略概述:

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

...我会像这样使用它，例如: {{＃每个}} ... {{我的组件}} ... {{/每个}}

1) 我希望组件绑定(bind)到模型，这样当“limitDeg”计算属性发生变化时，“.limit-div”将通过 CSS3 变换旋转 X 度:rotate(###度);.

2) 我想用无限循环的 CSS3 动画为“.indicator-div”设置动画，绑定(bind)到 currentValueDeg computedProperty。

我什至应该尝试用一个组件/ View 来做这件事，或者更确切地说，在一个部分中用多个组件/ View 来做这件事吗？

Answer 1

如果您使用的是 Handlebars ，只需将您的组件包裹在标签中，这样指定它:

<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>

然后像这样将它包含在你的 View 中:

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

如果你想让组件显示一个模型属性，你可以在组件内部做这样的事情(使用我上面例子中的变量):

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

编辑:

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