Backbone.View

Backbone.Viewについて色々。

by FiNGAHOLiC

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="app1">
    <span class="bar">BAR</span>
    <span class="baz">BAZ</span>
</div>
<div id="app2"></div>
<div id="app3"></div>
<script type="text/template" id="template">
    <span class="name"><%= name %></span>
    <span class="text"><%= text %></span>
</script>

JavaScript

(function($, window, document, undefined){
    
    // View はある要素とその子要素で発生するイベントに対する処理を記述するもの
    // その要素は View.el で表される
    // イベントハンドリングのルールは events に書く
    
    // events
    (function(){
        var View = Backbone.View.extend({
            el : '#app1',
            events : {
                'click' : 'click', // #app以下で発生するすべてのclickイベント
                'click .bar' : 'clickBar', // #app以下の.barで発生するclickイベント
                'click .baz' : 'clickBaz' // #app以下の.bazで発生するclickイベント
            },
            click : function(e){
                e.preventDefault();
                console.log('click');
            },
            clickBar : function(e){
                e.preventDefault();
                console.log('clickBar');
            },
            clickBaz : function(e){
                e.preventDefault();
                console.log('clickBaz');
            }
        });
        var view = new View();
    }());
    
    // render (underscore.jsあり)
    (function(){
        var View = Backbone.View.extend({
            el : '#app2',
            initialize : function(){
                this.render();
            },
            render : function(){
                $(this.el).html(''
                    + '<span class="name">foo</span>'
                    + '<span class="text">bar</span>'
                );
            }
        });
        var view = new View();
    }());
    
    // render (underscore.jsあり)
    (function(){
        var View = Backbone.View.extend({
            el : '#app3',
            initialize : function(){
                this.render();
            },
            render : function(){
                $(this.el).html(
                    _.template($('#template').html(), {
                        name : 'foo2',
                        text : 'bar2'
                    })
                );
            }
        });
        var view = new View();
    }());

}(jQuery, window, this.document));