プログラマーの雑記: Backbone.js簡単入門

2015年5月6日水曜日

Backbone.js超簡単入門　その一

まず、Backbone.jsとは？
軽量のjavascript MVCフレームワークです。

Backbone.jsにいつく重要な要素を説明します。

Modelモデル：検索処理等の業務ロジック処理を行い、処理結果データを保持する役割と果たす。例：人間People
Collection Modelの集合
View:ユーザーインタフェースとしてユーザーとのやり取りを行う役割を果たす
Router:クライアント側でのページ遷移のイベントとその後の処理をマッッピングをマッピングするルーティング機能を提供する

とりあいず、いつもの「Hello World」をBackbone.jsで書いてみましょう。
以下のソースコードを「test.html」ファイルで保存します。

<!DOCTYPE html>
<html>
<head>
  <title>kaoru2012-backbone.js-Hello World</title></head>
<body>
<button id="check">→クリックMe</button>
<ul id="world-list">
</ul>
<a href="http://kaoru2012.blogspot.jp/">もっとみる</a>
<script src="http://chay.chagasi.com/jquery-1.10.2.js"></script>
<script src="http://chay.chagasi.com/underscore.js"></script>
<script src="http://chay.chagasi.com/backbone.js"></script>
<script>
(function ($) {
  World = Backbone.Model.extend({
  // name属性を持つWoldモデルを作成します。
    name: null
  });
  Worlds = Backbone.Collection.extend({ // Worldの集合オブジェクトWorldsを定義
      initialize: function (models, options) {
      this.bind("add", options.view.addOneWorld);
    }
  });
  AppView = Backbone.View.extend({
    el: $("body"),
    initialize: function () {
      // コンストラクター関数
      this.worlds = new Worlds(null, { view : this })
    },
    events: {
      "click #check":"checkIn", // イベントをバインドする
    },
    checkIn: function(){
      var world_name = prompt("すみません、どこからきましたか。");
      if(world_name == "") world_name = '未知の星';
      var world = new World({ name: world_name });
      this.worlds.add(world);
    },
    addOneWorld: function(model){
      $("#world-list").append("<li>ここは<b>" + model.get('name') + "</b> からの挨拶:hello world!</li>");
      }
  });

  // AppViewオブジェクトを作る
  var appview = new AppView;
})(jQuery);
</script>
</body>
</html>

2015年5月6日水曜日

Backbone.js超簡単入門 その一

Backbone.js超簡単入門　その一