Backbone.js チュートリアル #2


はじめに

#1の続きです。
ボタンを押すとhello worldが増えていきます。

main.js

(function($){

  var ListView = Backbone.View.extend({
    el: $('body'),

    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem');

      this.counter = 0;
      this.render();
    },

    render: function(){
      $(this.el).append("")
      $(this.el).append("
    ");
    },

    addItem: function(){
      this.counter++;
      $('ul', this.el).append("
  • hello world"+this.counter+"
    • ");
    }
  });

  var listView = new ListView();
})(jQuery);

    コード解説

    6~8行目


        events: {
          ‘click button#add’: ‘addItem’
        },

    eventsプロパティはDOMイベントとビューのメソッドを紐づけます。
    イベント名（click）とセレクタ（button#add）を指定し、対応するメソッド（addItem）を設定します。


    17行目


          $(this.el).append(“<button id=’add’>Add list item</button>”)

    ボタンを作成します。idはaddなので、eventsプロパティで指定した要素がこのボタンです。


    21~24行目


        addItem: function(){
          this.counter++;
          $(‘ul’, this.el).append(“<li>hello world”+this.counter+”</li>”);
        }

    ボタンクリックに紐づけたメソッドです。
    $(‘ul’, this.el)はJQueryのセレクタで、this.elを起点にul要素を探します。


    次のチュートリアルでは、モデルを使います。