Backbone.js入門その9｢リストと詳細ボタンを作る｣

こんばんは。ゆんぼうです。

今回は、Backbone.jsを使用して、リストと詳細ボタンを作成します。

今回使用する環境は下記の通りです。

Webブラウザ
・Mozilla Firefox (v34.05) https://www.mozilla.org/ja/firefox/new/
・FireBug (v2.0.7) https://addons.mozilla.org/ja/firefox/addon/firebug/

JavaScriptライブラリ
・Backbone.js (v1.1.2) http://backbonejs.org/
・Underscore.js (v1.7.0) http://underscorejs.org/
・jQuery (v2.1.1) http://jquery.com/

---

■リストと詳細ボタン

【デモはこちら】
【ソースファイルはこちら】

今回は、登録する項目を増やします。
リスト毎の詳細ボタンを押下すると、アラートが表示され、
登録した項目が表示されるものを作成します。


index.html の head に下記の内容を記述します。

<script type="text/template" id="template-user-list-item">
  <%= label.name %>
  <input type="button" class="cls_button_detail" value="<%= label.detailButton %>">
  <input type="button" class="cls_button_delete" value="<%= label.deleteButton %>">
</script>
<script type="text/template" id="template-user-register">
  <label for="id_input_name"><%= label.name %></label>
  <input id="id_input_name" type="text">
  <br>
  <label for="id_input_age"><%= label.age %></label>
  <input id="id_input_age" type="number" min="0" max="99">
  <br>
  <label for="id_select_gender"><%= label.gender %></label>
  <select id="id_select_gender">
      <option><%= label.male %></option>
      <option><%= label.female %></option>
  </select>
  <br>
  <label for="id_select_blood"><%= label.blood %></label>
  <select id="id_select_blood">
      <option>A</option>
      <option>B</option>
      <option>O</option>
      <option>AB</option>
  </select>
  <br>
  <label for="id_input_mail"><%= label.mail %></label>
  <input id="id_input_mail" type="text">
  <br>
  <input id="id_button_regist" type="button" value="<%= label.registButton %>">
  <hr>
</script>

テンプレートID template-user-list-item はリスト1件分のテンプレートです。
削除ボタンと詳細ボタンを表示します。

template-user-register が登録画面のテンプレートです。
名前、年齢、性別、血液型、メールアドレスの入力項目を表示します。

main.js に下記の内容を記述します。

var UserListItemView = Backbone.View.extend({
    name : 'UserListItemView',
    tagName : 'li',
    events : {
        'click .cls_button_detail' : 'onClickDetailButton',
        'click .cls_button_delete' : 'onClickDeleteButton'
    },
    initialize : function(args) {
        this.model = args.model;
        this.collection = args.collection
        this.compiledTemplate = _.template($('#template-user-list-item').text());
    },
    render : function() {
        var templateData = {
            'label' : {
                'name' : this.model.get('name'),
                'detailButton' : '詳細',
                'deleteButton' : '削除'
            }
        };
        this.$el.append(this.compiledTemplate(templateData));
        return this;
    },
    onClickDetailButton : function() {
        console.log(this.name + '#onClickDetailButton');
        var message = '';
        message += '\n名前 : ' + this.model.get('name'); // (1)
        message += '\n年齢 : ' + this.model.get('age');
        message += '\n性別 : ' + this.model.get('gender');
        message += '\n血液型 : ' + this.model.get('blood');
        message += '\nメールアドレス : ' + this.model.get('mailAddress');
        alert(message); // (2)
    },
    onClickDeleteButton : function() {
        console.log(this.name + '#onClickDeleteButton');
        this.collection.remove(this.model);
    }
});

(1) model.get で指定したプロパティを取得することができます。
(2) アラートに生成した文字列を渡しています。

以上です。