tamulab.jp

tamulabはプログラミングのtipsやインターネット上で気になったことなどを書き溜めています

JavaScript テンプレートエンジン SNBinder について

calendar

reload

最近は、仕事上でjavascripなコーディングとかが増えてきてる。

別にいいんだけど、JSONで取得したものをブラウザ上に表示するときに困るのが見た目の問題ですよね。
divとかを $(“<div>”) ってしてaddClass() とか……これだと結構めんどくさいことに。

それでJavaScriptでSmartyみたいなテンプレートエンジンがあれば問題はほぼ解決できるんじゃないかと。

で「javascript template」でググってたら見つけたのが SNBinder です。

テンプレート部分はajaxで別ファイルから読み込むこともできるし、テンプレートに入れる値もわざわざ$.ajax()とかしなくても、SNBinderで一気にJSON取得→テンプレートファイル取得→表示までできちゃいます。

ただ、作者の方も書かれているようにテンプレート部分ではbindされた値をどこに入れるかだけで条件分岐や繰り返しの処理(ifやforeachとか)は出来ないことになっています。
それをやるならJavaScript側で取得したJSONを元に処理してから渡してやればいいだけの話ですしね。

で簡単に使ってみたのですが、気になったのがREADMEのこの部分

templates(“main” っていうところは templates.main が正しいんじゃないかと。

使ってみた感想ですが、分かりやすいですし使いやすいです。
テンプレート部分を1つのファイルに纏めておけるというのもトラフィックが増えなくていいと思います。

※この記事は T.T.Soft Development Studio で 2011/05/20 に公開した記事を移設したものです。
元記事: http://ttsoft.jp/2011/05/javascript-template-snbinder/

この記事をシェアする

folder Amazon

Fire TV Stickがキタ━(゚∀゚)━!!
Amazonでウィンターセール開催中(1/16まで)
AmazonでCyberMondayセール開催中[〜12/12]
more...

folder AWS

[9/15まで] AWS 無料クーポンプレゼント実施中
[8/25まで] AWS 無料クーポンプレゼント実施中
t2.nanoインスタンスを調べてみた
more...

sponsored link

folder CentOS

No Image

No Image

No Image

more...

folder FreeBSD

No Image

No Image

No Image

more...

folder git

[git] tigのインストール

No Image

No Image

more...

folder JavaScript

No Image

No Image

more...

folder JAWS-UG

JAWS-UG Shimane vol.5やります

No Image

more...

folder kindle

まだあった、ImpressのKindle本50%オフセール(2/23まで)
翔泳社のKindle本が50%オフセール中(2/22まで)
Kindle本50%ポイント還元フェア(1/22まで)
more...

folder MySQL

No Image

No Image

No Image

more...

folder PHP

[Laravel5] Query Builder を使った時にどんなSQLになるのか知りたい
[FuelPHP] 配列の値を入れ替える
[FuelPHP] Arr::get() が便利すぎる
more...

folder Ruby

入門Redmine 第5版を読んだよ
RubyWorldConference2016の参加券が届いたよ
Redmine 3.2.1でチケットのコピーができなくなった(追記あり:2016-06-30)
more...

folder ShellCommand

ランダムな文字列を生成する方法

No Image

more...

folder subversion

No Image

No Image

No Image

more...

folder WordPress

マテリアル2にチェンジ
EWWW Image Optimizerで画像をスリムにしよう
WordPressの記事を Markdown記法 で書く
more...

folder モノ

今年買ったペンを比べてみたよ
セリアのフリーノートを買ってみた
more...

folder 未分類

Withingsのスマート体重計Body Cardio開封の儀
格安SSL証明書 CoreSSL を設定してみた【スクリーンショット多数】
StartSSLで発行した証明書がFirefox51で使えなくなった[追記: Chromeも]
more...