式の例

動的出力

式を使用する最も簡単な方法は、式の出力です。式には、コンポーネントの属性、リテラル値、boolean などの値を使用できます。

1swfobject.registerObject("clippy.codeblock-0", "9");<p>{!v.desc}</p>

{!v.desc} という式の場合、v はコンポーネントの一連の属性からなるビューを表し、desc はコンポーネントの属性です。この式は、単にこのマークアップを含むコンポーネントの desc 属性値を出力します。

式にリテラル値を含める場合は、テキスト値を単一引用符で囲みます (例: {!'Some text'})。

数字は引用符で囲みません (例: {!123})。

boolean の場合、true には {!true}、false には {!false} を使用します。

値を渡す

式を使用して値を渡します。次に例を示します。

1swfobject.registerObject("clippy.codeblock-1", "9");<aura:iteration items="{!v.expenses}" var="expense">

{!v.expenses} 式は、aura:iteration タグに expenses 属性を渡します。この式はまだ評価されていません。aura:iteration タグが表示時に、式を評価して items 値を取得します。

1swfobject.registerObject("clippy.codeblock-2", "9");<ui:button aura:id="newNote" label="New Note" press="{!c.createNote}"/>

式 {!c.createNote} は、コントローラのアクションをボタンコンポーネントの press 属性に割り当てます。c はコンポーネントのコントローラを表し、createNote はアクションです。

条件式

条件式に該当するのは上記の 2 つの特殊なケースのみですが、数例を示しておきます。

1swfobject.registerObject("clippy.codeblock-3", "9");<a class="{!v.location == '/active' ? 'selected' : ''}" href="#/active">Active</a>

式 {!v.location == '/active' ? 'selected' : ''} は、location 属性が /active に設定されているかどうかを確認して、HTML の <a> タグの class 属性を条件に応じて設定します。true の場合は、式が class を selected に設定します。

1swfobject.registerObject("clippy.codeblock-4", "9");<aura:attribute name="edit" type="Boolean" default="true">
2<aura:if isTrue="{!v.edit}">
3    <ui:button label="Edit"/>
4    <aura:set attribute="else">
5        You can’t edit this.
6    </aura:set>
7</aura:if>

このスニペットは、<aura:if> コンポーネントを使用して、条件に応じて編集ボタンを表示します。