0

特定のモデルの計算されたプロパティにバインドし、それに応じてスタイル属性を変更するコンポーネント、またはこれに適している場合はビューを作成しようとしています。とにかくこれがどのように行われるべきかに影響する場合、私はEmber App Kitを使用しています。

コンポーネントは、「limitDeg」、「currentValueDeg」の 2 つの計算されたプロパティにバインドするメーターになります。このコンポーネントを使用するすべてのモデル インスタンスは、それらをモデル計算プロパティとしてコンポーネントに提供できます。

メーターには 3 つの重複する div があります。「.meter-div」はバインディングのない単なる背景であり、そのうちの 1 つは CSS3 変換で X 度だけ回転し、現在の「limitDeg」を表示します。そのため、「transform:rotate(###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 度回転するようにしたいと思います。 .

2) 無限にループする CSS3 アニメーションで ".indicator-div" をアニメーション化し、currentValueDeg の computeProperty にバインドしたいと思います。

これは、1 つのコンポーネント/ビューでこれを行うべきですか、それとも 1 つのパーシャル内で複数のコンポーネント/ビューを行うべきですか?

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 に答える