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

コンポーネントにイベントの設定をすることで、データ変更の検出ができるそうです、ドキュメントにはその例として、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の並びも変わりましたね。そういう仕様なのでしょうか？

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

updateボタンを押すと、

むむむ？
もう一度押すと、

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

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

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