Posted at

aura:iterationとデータ変更の検出

More than 3 years have passed since last update.

コンポーネントにイベントの設定をすることで、データ変更の検出ができるそうです、ドキュメントにはその例として、aura:iterationコンポーネントを参照してください、と記載がありました。試してみたいと思います。


component.cmp

<aura:component>

<aura:attribute name="items" type="List" default="a,b,c,d,e" />

<table class="numbers">
<tr><th>#</th><th>name</th></tr>
<aura:iteration items="{!v.items}" var="item" indexVar="index">
<tr>
<td>{!index}</td>
<aura:renderIf isTrue="{!index % 2 == 1}">
<td class="number-odd">{!item} は奇数番目</td>
<aura:set attribute="else">
<td class="number-even">{!item} は偶数番目</td>
</aura:set>
</aura:renderIf>
</tr>
</aura:iteration>
</table>

<ui:button press="{!c.updateItems}" label="update" />



controller.js

({

updateItems: function(cmp, evt, hlp) {
var old_items = cmp.get('v.items');
console.log('old values=' + old_items);

var new_items = ['e','d','c','b','a'];
/*
var new_items = old_items[0] == 'a' ? ['f','e','d','c','b']
: ['a','b','c','d','e'];
*/

console.log('new values=' + new_items);
cmp.set("v.items", new_items);
}
})


ボタンを押すと、見事自動的に反対向きになりました。

…ん、indexの並びも変わりましたね。そういう仕様なのでしょうか?

スクリーンショット 2014-12-16 21.08.10.png

それでは、今度は、2パターンで交互に変わるようにしてみましょう。上のコードブロックのコメントアウトされている方を有効にしてみます。

スクリーンショット 2014-12-16 21.10.52.png

updateボタンを押すと、

スクリーンショット 2014-12-16 21.10.42.png

むむむ?

もう一度押すと、

スクリーンショット 2014-12-16 21.10.58.png

消えた!

ついでにUncaught TypeError: Cannot read property 'appendChild' of nullとかエラーも出てるんですけども…。

うーん…使い方が間違っているのかもしれませんが、予期しない挙動でした。

という訳で、aura:iterationタグには注意した方が良さそう、ということと、イベントの実装は結構難しそう、というのが今日の結論です。