Backbone.jsを使ってみる 2

前回の補足。

Viewのイベント・メソッドを指定する部分「events:{}」で、イベントを取得するID・クラス名を指定する方法について。

viewTab.slim

section#tab_frame
    input#arrow_button_left.button_arrow type="button"
        label.arrow_label for="arrow_button_left" <
    input#tab_0.tab_radio type="radio" name="tabs" data-tab-num='0'
        label#tab_label_0.tab_label for="tab_0"
    input#tab_1.tab_radio type="radio" name="tabs" data-tab-num='1'
        label#tab_label_1.tab_label for="tab_1" タブ２
    input#tab_2.tab_radio type="radio" name="tabs" data-tab-num='2'
        label#tab_label_2.tab_label for="tab_2" タブ３
    input#tab_3.tab_radio type="radio" name="tabs" data-tab-num='3'
        label#tab_label_3.tab_label for="tab_3" タブ４
    input#tab_4.tab_radio type="radio" name="tabs" data-tab-num='4'
        label#tab_label_4.tab_label for="tab_4" タブ５
    input#arrow_button_right.button_arrow type="button"
        label.arrow_label for="arrow_button_right" >
〜省略〜

javascript.js

(function () {
〜省略〜
    var DEFAULT_RIGHT_TAB_NUM = 2;
    var TabView = Backbone.View.extend({
        el: '#tab_frame',
        events: {
            'change .tab_radio': 'movePage',
            'click .button_arrow': 'moveTab'
        },
        moveTab: function (e){
            switch (e.target.id){
            case 'arrow_button_left':
                // 一つ左隣のTabを表示.
                intRightTabNum--;
                updateTabStyles();
                break;
            case 'arrow_button_right':
                // 一つ右隣のTabを表示.
                intRightTabNum++;
                updateTabStyles();
                break;
            }
        },
        movePage: function (e) {
            var strTargetId = '#' + e.target.id;
            var intNewPageNum = jQuery(strTargetId).data('tabNum');
            location.href='?tab=' + intNewPageNum + '&lrt=' + intRightTabNum;
        }
    });
    var view = new TabView();

〜省略〜

    this.updateTabStyles = function(){
        // 矢印ボタンのEnable/Disableを設定.
        document.getElementById("arrow_button_left").disabled = (intRightTabNum <= intDefaultRightTabNum);
        document.getElementById("arrow_button_right").disabled = (intRightTabNum >= 4);
        
        // Tabの表示切り替え
        document.getElementById("tab_" + intTabNum).checked = true;
        intTabLeftNum = intRightTabNum - 2;
        for(var i=4;i>=0;i--){
            document.getElementById(aryTabName[i]).style.display = ((i >= intTabLeftNum)&&(i <= intRightTabNum))? "block": "none";
        }
    };

なんのことはない、イベントを取得したい要素の親のID・クラスを「el」に指定してやればOKのようです(前も試したような気はするのですが、何かを間違えていたのかもしれません)。

ついでにタブ(ラジオボタン)の左右に表示している矢印ボタンもViewに追加してみました。

個別にメソッドを追加していた以前の状態に比べると、整理された感じがしますね。

Before

javascript.js

(function () {

〜省略〜

    this.moveTabRight = function(){
        // 一つ右隣のTabを表示.
        if(intRightTabNum <= 3){
            intRightTabNum++;
        }
        updateTabStyles();
    };
    this.moveTabLeft = function(){
        // 一つ左隣のTabを表示.
        if(intRightTabNum > 0){
            intRightTabNum--;
        }
        updateTabStyles();
    };
    this.updateTabStyles = function(){
        // 矢印ボタンのEnable/Disableを設定.
        document.getElementById("arrow_button_left").disabled = (intRightTabNum <= intDefaultRightTabNum);
        document.getElementById("arrow_button_right").disabled = (intRightTabNum >= 4);
        
        // Tabの表示切り替え
        document.getElementById("tab_" + intTabNum).checked = true;
        intTabLeftNum = intRightTabNum - 2;
        for(var i=4;i>=0;i--){
            document.getElementById(aryTabName[i]).style.display = ((i >= intTabLeftNum)&&(i <= intRightTabNum))? "block": "none";
    };
〜省略〜