Backbone.js + Marionette.js + stickit を使ってみた
普段WEBアプリとか経験がなくてMV*とかなんぞや?って感じの私です。(正直大本のMVCの理解も怪しいですが)
WEBアプリを作成してて、AngularJSってすごい便利!一生ついていくッスと思っていたら、
「IE8、9で動かないんですけど?」
来年1月サポート切れるから勘弁してくれ~
AngularJSに結構機能が多いので、ほかに動かない機能があったら困るので、代替のJSフレームワークを探してみたところ Backbone.jsがありました。
というか、AngularJSを試す前にBackbone.jsを試そうと思ったら全然動かず AngularJSを使ってみたらすんなり使えてしまったので、AngularJSを使いました
Backbone.jsが動かなかったのは基本的な部分を間違っていたと思う・・・もう少し頑張っていれば・・・
バインドとかテンプレとか調べたところ、「Backbone.js + Marionette.js + stickit」という組み合わせが良いらしい。
以下公式サイト
「Backbone.js + Marionette.js + stickit」を使ったサンプルが意外と見つからなかったので、 試行錯誤した結果以下のコードになった
HTML
<!DOCTYPE html> <html> <head> <script src="jquery-1.11.3.js"></script> <script src="json2.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="backbone.stickit.js"></script> <script src="backbone.wreqr.js"></script> <script src="backbone.marionette.js"></script> </head> <body> <div id="input_target"></div> <div id="display_target"></div> <!-- InputViewテンプレ --> <script type="text/template" id="input_template"> お前の名前を言ってみろ! <input type="text" name="name" id="input_name" /> </script> <!-- DisplayViewテンプレ --> <script type="text/template" id="display_template"> <span id="display_element"> <%- name %> </span> </script> </body> <script src="backbone-test.js"></script> </html>
Javascript(ファイル名:backbone-test.js)
(function($) { 'use strict'; /* MV定義(Start) * ========================================================================== */ /** * 入力データModel */ var InputData = Backbone.Model.extend({ defaults : { 'name' : 'もなかアイス' } }); /** * 入力View */ var InputView = Backbone.Marionette.ItemView.extend({ // テンプレート展開先 el : '#input_target', // テンプレート template : '#input_template', // バインドするinput要素とModelのプロパティ名 bindings : { '#input_name' : 'name', }, // コンストラクタ initialize : function() { _.bindAll(this, 'render'); }, // 描画処理・バインド登録処理 render : function() { var args = Array.prototype.slice.apply(arguments); var renderDatas = Marionette.ItemView.prototype.render.apply(this, args); this.stickit(); return renderDatas; }, }); /** * 表示View */ var DisplayView = Backbone.Marionette.ItemView.extend({ // テンプレート展開先 el : '#display_target', // テンプレート template : '#display_template', // コンストラクタ initialize : function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); }, // 再描画処理 render : function() { var args = Array.prototype.slice.apply(arguments); var renderDatas = Marionette.ItemView.prototype.render.apply(this, args); return renderDatas; }, }); /* MV定義(End) * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ var inputData = new InputData(); var inputView = new InputView({ 'model' : inputData }); var displayView = new DisplayView({ 'model' : inputData }); inputView.render(); displayView.render(); })(jQuery);
機能は、
テキストボックスのデフォルトに「もなかアイス」が設定されている。
テキストボックスを変更すると、テキストボックス下の文字列が連動する。
InputView → InputData → DisplayView とバインドされ、#input_nameの変更が即時「<%- name %>」に 反映されるようになったのだが、AngularJSの場合JSファイルを用意しなくても実現できる機能のため、 AngularJSに慣れてしまった私にとって違和感があるコードになった
AngularJSの$scopeさんが優秀すぎたのか・・・実はBackbone.jsの書き方が悪かったりして・・・
とは言いつつ、正直慣れていない(ライブラリの中身・メソッドを知らない)けれども、個人的にBackbone.jsの方が好きかもしれない