jQueryのFlyDom pluginを使ってみたら便利だったけどバグに当たった

JSONを取ってきて、そこからJavaScriptで動的にHTMLを組み立てていくような場合、

$('#content').html(
    $('<table>').attr( { id: 'items' } ).html(
        $('<tr>').append(
            $('<th>').html( 'Header' )
        ).append(
            $('<td>').html( 'Data' )
        )
    )
);

とか書くのが面倒だなーと思った。このへん、MochiKitはいい感じに書けたよね。

何かいい手はないかとremedie.jsを読んでみたら、これが使われてた。


●jQuery Plugin - FlyDOM: Create DOM on the Fly


さっきの例だと、

$('#content').empty().createAppend(
    'table', { id: 'items' }, [
        'tr', {}, [
            'th', {}, 'Header',
            'td', {}, 'Data'
        ]
    ]
);

てな具合にすっきり書けて楽になった。

と思いきや、こいつにformのレンダリングを任せたらoptionのvalueが出てこない。


●Plugins | jQuery Plugins


どうやらバグらしい。jquery-flydom-3.1.1.jsだと、326行目からのvar special = { 〜 } でいろいろ定義してるところから﹁'value': 'defaultValue', ﹂を削除すればいい、とのことなのでやってみたら確かに直った。

Stringのprototypeにメソッド追加してるみたいなので、そのへんが気に入らない人もいるかも知れないけど、わりと便利なのでしばらくこれで書いてみよう。