Question

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

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

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

下面是我如何考虑使用组件/视图的基本概要：

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

...我会像这样使用它： {{＃每}} ... {{我的分量}} ... {{/每}}

1）我希望组件绑定到模型，以便当“limitDeg”计算属性发生更改时，“。limit-div”将使用CSS3 transform旋转X度：rotate（###度）;

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

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

1 个答案: