このエントリーをはてなブックマークに追加

読了: 約 7 分

仕事で使うことになったので一先ずメモ

JST

第4回 JavaScriptTemplates(JST)入門!

概要

JavaScript用テンプレートエンジン「JavaScript Templates(JST)」
TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジン

デメリット

・SEO的にどうなのか。
・JSオフすると微妙だよね
・テンプレートエンジンだから重い?

試しに適当なものを作成しました。

<!--
window.onload = function(){
  var contents = document.getElementById('contents');
  var temp = contents.innerHTML;

  var data = { name:'ザキヤマさん',say:'パンダP'};
  var tempObj = TrimPath.parseTemplate(temp);
  var result = tempObj.process(data);
  contents.innerHTML = result;
};
//-->
  var data = { name:'ザキヤマさん',say:'パンダP'};

JSONオブジェクト形式で、表示したいデータをを作成

nameキーに文字列を設定。変数を設定することも可能。

参考サイト

[JavaScript][TrimPath]JavaScript Templates調べ
Template Syntaxは参考になりますね。
変数や、if、for文の書き方も載っています。

Backbone.js

Backbone.jsでなんか作ってみた所感

  • ユーティリティー・ライブラリー underscore.js に大きく依存しています。
  • jQuery/Zepto に少し依存しています。
  • モデルの変更内容に応じてアプリケーションの HTML を自動的に更新するため、コードの保守が容易になります。
  • クライアント・サイドでのテンプレート機能の使用が促進されるため、JavaScript に HTML を埋め込む必要がなくなります。

ポイント

「サーバーと連携する機能が無い限りは、そこまで意味が無い」

arrayとobjectが混ざって階層化されたJSONを扱う時、Backbone.jsで、arrayをCollection、objectをModelでラップし、
これをネストさせた形でモデル部分のクラスを構成。
そして、それぞれに対しViewを作り、Model, Collectionに変化が起こった時にViewを変更するというのを、、Model,Collectionのイベントを使って行う

参考

Backbone.js Advent Calendar 2011

Backbone.js のソースコードを読んだ

backbone-localstorage.jsを使うとかなり簡単にデータの保存ができる

Backbone.js入門 「View と Model と Collection の連携」

入門

  1. Backbone.js入門 Events
  2. Backbone.js入門 MVC
  3. Backbone.js入門 View
  4. Backbone.js入門 Model
  5. Backbone.js入門 ViewとModelの連携
  6. Backbone.js入門 Collection
  7. Backbone.js入門 ViewとModelとCollectionの連携
  8. Backbone.js入門 RouterとHistory

入門

Backbone.jsでのプログラミングは、Events が提供するインタフェースを用いて オブザーバ・パターン を上手く使い、オブジェクト間の疎結合を促進することが基本的なコーディング方針

Eventの使い方

A.bind("doA", B.a);  // A に対して doA が trigger されたら B.a を実行する
A.a = function () {
    // do something
    this.trigger("doA") // => B.a が実行される
}
A = {};
_.extend(A, Backbone.Events);

Events を拡張したAにはbind, unbind そして trigger の3つのメソッドが追加されています。

bind(eventName, callback, [context])
A.trigger(eventName) によって callback が起動される

context はオプションの引数で、callback の this に束縛される

templateエンジンはunderscore.jsのもの

複雑なHTMLを動的にロードするとき,JSテンプレートを利用するとよい

JavaScriptテンプレート

使用目的

  • jserとデザイナーの共同作業。
  • 動的なデータAjaxなどをするときに、JS側だけだとappendの山になってしまうのを防ぐ

利用するもの
JSテンプレート,例えばjQuery template(beta)やmustache.js,underscore.jsの_.templateなどを利用する.

以下は_.templateの使い方です.(underscore.jsのドキュメントより引用)
静的なデータを扱う場合は、

<%= %>

=が入ります。

動的なデータを扱う場合のhtml
デザイナーと共同でやる場合、シンプルなデータを(今回なら1)返してあげるかしないと
扱うのが難しいかもしれないですが。

<% if@data == 1: %>
//データで1が帰ってきた時の処理
<% else: %>
//それ以外の処理
<% end %>

templateのキャッシュのさせ方で参考になった。
複雑なHTMLを動的にロードするとき,JSテンプレートを利用するとよい

template内で諸々やる時のメモ

template内でオブジェクトの確認等したい時下記の方法でconsoleが表示できる
ecoファイルがcoffeescriptだから

<%= console.log @canpost %>

jQueryMobileとBackbone.jsでスマホアプリケーション

ドワンゴ社の方がデモで上げていたものがあったので、これを改良していきたいと思います。
jQueryMobileは、デザインのモジュールと動きをつける事ができます。
jQueryMobileとBackbone.jsでページ遷移するデモアプリケーション
USERIDを入力すると、自分のストックした記事がリストになって検索結果に表示されるアプリケーションです。
これを応用すれば、色々なマッシュアップアプリケーションが作成出来そうですね。
js側でHTMLの構造作ってappendしてますが、これ静的に置いた方いいんでしょうかね。
デザイナー、マークアップエンジニアと共同作業するのであれば、js側で持たせずに
やったほうがjserの作業工数が減るんじゃないかなーと。

ソースでいうとこの辺り

var Posts = Backbone.Collection.extend({
        model: Post,
        initialize: function(data) {
            this.url = "http://" + data.userId + ".tumblr.com/api/read/json";
        },
        parse: function(resp) {
            return resp.posts;
        }
    });

簡単なjQueryMobileの説明
idにはページの#~を振ります。最初のページはsearchという検索画面、次がid=”result”という検索結果ページになります。

<div data-role="page" id="search">
    <div data-role="header"></div>
</div>
<div data-role="page" id="result">
    <div data-role="header"></div>
</div>

使い方は下記を参考に。
jQuery mobile でまず押さえておきたいページ構造

参考

Underscore.jsのtemplate触ったメモ
Underscore.js はもっと評価されていい
Backbone 入門
Ajax Web アプリケーションに MVC (モデル・ビュー・コントローラー) 構造を導入する方法

render,template,html側の書き方はリスト18,19,20辺りに記載されています。

HTML5とJavascriptによるモバイルアプリケーションアーキテクチャ

Backbone.jsの実践的資料

大体どのBackbone.jsの記事も単一のファイルにmodel,view,collectionをまとめていて、可読性が…と思っていたのですが、
非常に分かり易いフォルダの分け方、ファイルの分け方をされていたので参考にしてます。
下のスライドのメリットにも書かれていますが、1つのファイル辺りのソースを短くして、
機能ごとに分ける事で大規模開発にも役立てる事が出来そうですね。

スライド
Twitterのデモ

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'