もなかアイスの試食品

「とりあえずやってみたい」そんな気持ちが先走りすぎて挫折が多い私のメモ書きみたいなものです.

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

Backbone.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);

機能は、

  1. テキストボックスのデフォルトに「もなかアイス」が設定されている。

  2. テキストボックスを変更すると、テキストボックス下の文字列が連動する。

InputView → InputData → DisplayView とバインドされ、#input_nameの変更が即時「<%- name %>」に 反映されるようになったのだが、AngularJSの場合JSファイルを用意しなくても実現できる機能のため、 AngularJSに慣れてしまった私にとって違和感があるコードになった

AngularJSの$scopeさんが優秀すぎたのか・・・実はBackbone.jsの書き方が悪かったりして・・・

とは言いつつ、正直慣れていない(ライブラリの中身・メソッドを知らない)けれども、個人的にBackbone.jsの方が好きかもしれない