フロントエンドでHTMLをレンダリングする技術全般を黙々とハックするclient-side templating勉強会というイベントに昨夜参加してきました。
完全に場違いであるのは事前にわかっていたけど、行ってみるとすごい人ばかり参加してたのと、知らないことが多く勉強不足な点を思い知った一日でした
mustache.jsって？
さて、ここから本題のmustache.jsの話。GtiHubのREADMEによると
mustache.js - Logic-less {{mustache}} templates with JavaScript
ということで、具体的には
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};
var output = Mustache.render("{{title}} spends {{calc}}", view);
みたいなことが出来るテンプレートエンジンなのですが、CommonJSのモジュールとしても使えるので
var Mustache = require("mustache");
var info = {
name:'John'
};
var tmpl = "My name is {{ name }}"; // 結果はMy name is Johnとなる
みたいなことが出来ます。
CommonJSモジュールとして利用できるならTitanium Mobileからも利用できるよね？
client-side templating勉強会に申し込む時に、CommonJSなmustache.jsをTitanium Mobileで使えないか勉強してみたいと思いますと書いていたので、それをひたすらモクモクとやってました。
使おうと思った背景をちょっとだけ書いておくと、今作ってるアプリで
var exports = {
createComposeRow :function(){
var composeRow = Ti.UI.createTableViewRow($$.composeRow);
composeRow.showd = true;
var mail = Ti.UI.createImageView($$.lightMailBtn);
composeRow.add(mail);
var readLater = Ti.UI.createImageView($$.lightTextBtn);
composeRow.add(readLater);
var star = Ti.UI.createImageView($$.lightStarBtn);
composeRow.add(star);
var tweet = Ti.UI.createImageView($$.lightCommentBtn);
composeRow.add(tweet);
return composeRow;
};
みたいな処理がちょいちょい出てきます。ひたすらTi.UI.createImageViewする処理が多いのでこの部分をもうちょっとスマートに書けないかなと思ってmustache.jsでうまいこと出来ないかと思ってモクモクしようと思ってました
結果的には、上記問題解決まではいたらず、とりあえずのサンプル程度しか出来ませんでしたがひとまずコードを晒しておきます
buildするとこうなります
