Backbone.jsのViewを復習 その2

https://app.codegrid.net/entry/backbone-view

by FiNGAHOLiC

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form class="form">
    <input type="text" class="input"><input type="submit" class="submit">
</form>
<div class="lists"></div>
<script type="text/template" class="js-tmpl-item">
    <span><%= text %></span>
</script>

JavaScript

(function(){
    
    var Todo = Backbone.Model.extend({});
    
    var Todos = Backbone.Collection.extend({
        model: Todo
    });
    
    var TodoForm = Backbone.View.extend({
        collection: null,
        events: {
            'submit': 'add'
        },
        initialize: function(){
            this.$input = this.$('.input');
        },
        add: function(e){
            e.preventDefault();
            var todo = this.$input.val();
            if(todo) this.collection.add({ text: todo });
        }
    });
    
    var TodoList = Backbone.View.extend({
        collection: null,
        initialize: function(){
            this.collection.on('add', this.render, this);
        },
        render: function(todo){
            var item = new TodoListItem({ model: todo });
            this.$el.append(item.render().el);
        }
    });
    
    var TodoListItem = Backbone.View.extend({
        model: null,
        tmpl: $('.js-tmpl-item').html(),
        render: function(){
            this.$el.append(_.template(this.tmpl, this.model.toJSON()));
            return this;
        }
    });
    
    $(function(){
        var todos = new Todos();
        var todoform = new TodoForm({
            el: '.form',
            collection: todos
        });
        var todolist = new TodoList({
            el: '.lists',
            collection: todos
        });
    });
    
}());