0

我正在尝试创建一个组件或视图，如果它更适合于此，它绑定到给定模型的计算属性并相应地更改样式属性。我正在使用 Ember App Kit，如果这会影响到应该如何做的话。

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

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

下面是我对组件/视图的想法的基本粗略概述：

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

...我会像这样使用它，例如：{{#each}} ... {{my-component}} ... {{/each}}

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

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

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

4

1 回答 1

0

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

<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是传递给调用组件的视图的模型。

于 2014-01-31T11:28:12.500 回答