かしこくもなりたいし、女の子にもなりたかった。

とってもガーリーなゆるふわ愛され何でも屋を目指す、30代男性がお送りするファビュラスなブログ。

jQueryオブジェクトを代入出来るテンプレートエンジンっぽいもの

どうも望みのものがちらっと探しても見当たらなかったので、必要最小限のもんを書いてみました。 正確にはjQueryオブジェクト「しか」突っ込めないテンプレート。 意外とこういうの欲しい人居そうな気がするので(そしてもっと良い解決知ってそうな人も居そうなので)晒してみるとです。タイトルの通りjQueryに依存するのでjQuery必須。 もっといいのが有るとか、もっとこうしやがってくださいクソがみたいな、エロい人カマン。

本体

var toolkit = {
    objectTemplate:function($mainObj,template,$objArray){
        template = template.split("${").join("<span class='matchtarget' data-targetelm='").split("}").join("'></span>")
        $mainObj.html(template);
        $mainObj.find("span.matchtarget").each(function(){
            var elm = $(this).data('targetelm').split(".");
            var obj = $objArray;
            for(i=0,il=elm.length;i<il;i++){
                console.log(elm[i])
                obj = obj[elm[i]]
                console.log(obj)
            }
            $(this).before(obj).remove()
        })
        return $mainObj;
    }
}

使い方

//jQueryオブジェクトをごりごり書きます。オブジェクトのネストは出来ます。要素の中に要素はあらかじめappendするなり。

var $body = {
    head:$("<div />").addClass("head"),
    hands:{
        left:$("<li />").addClass("lefthand"),
        right:$("<li />").addClass("righthand"),
    }
}

//templateはjQuery-tmplと同じように。ネストされたオブジェクトは、.区切りで普通に書けば通ります。単なる置換同然の動作なので、underscoreみたいにJSのコードを同居とかできんとです。

var template = "<div class='avatar'>${head}<ul class='hands'>${hands.left}${hands.right}</ul></div>

//あらかじめ突っ込まれる要素を作っておきます。こいつを第一引数に指定。
var wrap = $("<div />").attr("id","enemy")

//実行すると、第一引数のオブジェクト内をテンプレートに準じた内容に置き換えられて帰ってくるとです。
toolkit.objectTemplate(wrap,template,$body)

//この動作によってオブジェクトの関連性は切れないので、こういうことをやってもちゃんと反映されるとです。
$body.hands.append($("<img />"))

追記:これじゃ改行混ぜられたとき通らないな。まあ取り急ぎ必要に駆られて書いたので、その辺は追って直そう。