script.aculo.usのBuilder

element = Builder.node(
    'div',{id:'ghosttrain'}, [
         Builder.node('div',{className:'controls',style:'font-size:11px'}, [
              Builder.node('h1','Ghost Train'), 
              "testtext", 
              2, 
              3, 
              4, 
              Builder.node('ul',[
                   Builder.node('li',{className:'active', onclick:'test()'},
                   'Record')
          ]),
     ]), 
]);

tdタグのcolSpanとかどういう風に指定すればいいのかよく分からなかったです。

http://d.hatena.ne.jp/akm/20051023 に書いたコードでは、ネストしたノードは、特別な属性"body"に文字列かオブジェクトか、それらの配列を指定することができます。この辺どっちがいいかは使い方にもよるでしょう。

試しに同じ内容のものを書いてみた。

var builder = new JsonDomBuilder("body", document);
var element = builder.execute( 
    { tagName: 'div', id: 'ghosttrain', 
        body: {
            tagName: "div", className:'controls', style:'font-size:11px',
            body: [
                { tagName: "h1", body: 'Ghost Train' },
                "testtext", 
                "2", 
                "3", 
                "4", 
                {tagName: "ul",  
                    body: {tagName: 'li',className:'active', onclick:'test()', body:'Record' }
                }
            ]
        }
    }
);

やっぱりtagNameとbodyがちょっと鬱陶しい。tとかbとかに略しちまおうかとも思ったけど、何か気持ち悪いので意味がわかるようにこうしておいた。

それと2,3,4は文字列でないと今のところまずい。StringだけでなくNumber、Dateもノードを表すオブジェクトとして認めるのが普通な気がしてきた。Booleanもそうしたいところだけど、一般的にBooleanの値ってTrueとかFalseで表現しても嬉しくないよね。やっぱcheckboxみたいになってないと、お客さんにちらっと見せることができない。disabledのinput type="checkbox"として見せるか。うーん、checkboxにもreadonlyが効いてくれればいいのに。

ちなみにtagNameという記述は変えられないけど、bodyの方はJsonDomBuilderのコンストラクタの第1引数で変更可能。引数は両方とも指定しなくてもOK。