javascript - Ractive.js 親関係を持つアイテムの単一配列からのネストされたリスト

Question

id、parentid、およびmessageプロパティを持つアイテムのリストがあります。parentid同じリスト内の他のアイテムを参照します。ネストされたレベルに制限はありません。これをどのように実装しますか？

言い換えれば、これをどのように取るか：

var data = [
    {
        id: 1,
        parentid: 0,
        message: "I'm 1, and I have no parent."
    }, {
        id: 2,
        parentid: 1,
        message: "I'm 2, and 1 is my parent."
    }, {
        id: 3,
        parentid: 1,
        message: "I'm 3, and 1 is my parent."
    }, {
        id: 4,
        parentid: 0,
        message: "I'm 4, and I have no parent."
    }, {
        id: 5,
        parentid: 1,
        message: "I'm 5, and 2 is my parent."
    }
];

そして、これを次のようにします。

<ul>
    <li>
        I'm 1, and I have no parent.
        <ul>
            <li>
                I'm 2, and 1 is my parent.
                <ul>
                    <li>
                        I'm 5, and 2 is my parent.
                    </li>
                </ul>
            </li>
            <li>
                I'm 3, and 1 is my parent.
            </li>
        </ul>
    </li>
    <li>
        I'm 4, and I have no parent.
    </li>
</ul>

テンプレートでこれを行うためのすばやく簡単な方法はありますか? 配列全体をループせずに、新しい配列を作成してレンダリングしますか?

さらに、何も残らないまで再帰的にレンダリングするテンプレートの最適な実装は何ですか?