レンダリング済みのHTMLからBackbone.jsのModelとViewを作る

今作っているページは
「クローラーが回れるようにHTMLをサーバー側で吐き出しつつ、動的な処理はBackbone.jsで制御」
なんてことをやっております。

ところがハタと手が止まった。レンダリング済みのHTMLからModelとViewを作るにはどうすればいいんだ？

とりあえずやってみた

HTML側はこんな感じ。各リストタグ(li)が一個のView & Modelに該当。各リスト内にinput hiddenでModelとするデータを埋める。

    <div id='tag_list_area'>
        <p>タグリスト <small>(クリックで選択/選択解除)</small></p>
        <ul id='tag_list'>
            <li>
                <input type='hidden' name='tag_name_1' class='tag_name' value='ほげ'/>
                <input type='hidden' name='tag_id_1' class='tag_id' value='1'/>
                <input type='hidden' name='selected_1' class='tag_selected' value='0'/>
                <a href='#' class='tag'>ほげ</a>
            </li>

            <li>
                <input type='hidden' name='tag_name_2' class='tag_name' value='ふが'/>
                <input type='hidden' name='tag_id_2' class='tag_id' value='2'/>
                <input type='hidden' name='selected_2' class='tag_selected' value='0'/>
                <a href='#' class='tag'>ふが</a>
            </li>

            <li>
                <input type='hidden' name='tag_name_3' class='tag_name' value='ぴよ'/>
                <input type='hidden' name='tag_id_3' class='tag_id' value='3'/>
                <input type='hidden' name='selected_3' class='tag_selected' value='0'/>
                <a href='#' class='tag'>ぴよ</a>
            </li>
        </ul>
    </div>

んで、jsは各リストタグ内のinput要素を読んでModel化。その後Viewに渡してやる。ついでに「el」にViewとして保持させたい要素を渡す。

$(function(){
    // HTMLからModelとViewを作る
    $('#tag_list li').each(function(e){
        var data    = {};
        var li      = $(this);
        data.tag_name  = li.children('.tag_name').val();
        data.tag_id    = li.children('.tag_id').val() -0;
        data.selected  = li.children('.tag_selected').val() -0;

        var model   = new TagModel(data);
        var view    = new TagView({
                            el  : li,
                            model: model
                        });
    });
});

これでとりあえず動くけど・・・なんか不格好だな。もっといい方法はないものか。

この方法でタグをつけたり外したりする画面と処理を書いてみた。
HTMLはあらかじめ描画済みで、後からBackbone.jsのModelとViewを生成し動的処理を追加。
https://zafiel.wingall.com/data/taglist/tags.html
ファイル一式(Github)

うーん、もっとスマートな方法があれば教えてくださいまし。