4

静的クラス「form-control」と動的プロパティ値「color」を入力ヘルパーのクラス属性にバインドしようとしていますが、使用している構文はこれをレンダリングされた DOM 要素に出力するだけです

class="form-control {{color}}"

「color」の値をクラス属性に実際にバインドすることなく。これが通常の DOM 要素の静的クラスと動的クラスを HTMLBars にバインドする方法であることは知っていますが、中かっこを使用する要素には別の構文がありますか?

私が使用している構文：

{{input class="form-control {{color}}" value=property.value type="text"}}
4

1 に答える 1

6

二重中括弧構文は、ハンドルバーでヘルパーまたはパスを呼び出します。ただし、ヘルパー内から、サブ式を呼び出すためにそれらを使用することはできません。代わりに、括弧を使用してサブ式を呼び出す必要があります。例えば：

違う

{{input value={{uppercase user.name}} }}

正しい

{{input value=(uppercase user.name) }}

ハンドルバーでは、リテラル値を動的な値で補間することは許可されていないためです。目的を達成するには、カスタム ヘルパーを使用する必要があります。Ember 1.3.2 にはconcatヘルパーが付属しているので、次のように使用できます。

{{input class=(concat "form-control " color) value=property.value type="text"}}

「form-control」クラスの最後にあるスペースに注意してください。これは、concat ヘルパーが現時点ではセパレーターを追加しないために必要です。

古いバージョンを使用している場合は、join-paramsこれを処理するヘルパーを作成できます。

app/helpers/join-params.js

import Ember from 'ember';

export function joinParams(params) {
  return params.join(' ');
}

export default Ember.HTMLBars.makeBoundHelper(joinParams);

そして、「form-control」クラスの最後にスペースを追加せずに使用します

{{input class=(join-params "form-control" color) value=property.value type="text"}}
于 2015-06-28T18:23:12.417 に答える