TitaniumMobileでmustache.js活用できないか試してみた

フロントエンドで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するとこうなります