index.html | searchcode

/index.html

https://bitbucket.org/ilumin/backbone-example-todolist
HTML | 176 lines | 147 code | 29 blank | 0 comment | 0 complexity | 71d4c56987d000c03b9384b04a4d731c MD5 | raw file

<!doctype html>
<html>
<head>
<title>Backbone 101 - Counter button</title>
<style>* { font-family: Arial; }</style>
</head>
<body>

<h1>Backbone 101 - Todolist</h1>
<h3>Step 6: Clear complete task</h3>

<hr>

<div id="list-holder">
    <button id="add-button">Add</button>
    <button id="clear-button">Clear</button>
    <button id="clear-complete-button">Clear Complete Task</button>
    <span id="counter">empty</span>
    <div id="list"></div>
</div>

<script type="text/template" id="todo-item-template">
<input type="checkbox" <% if(checked){ %>checked<% } %>/>
<% if(checked){ %>
<span style="text-decoration: line-through;"><%= text %></span>
<% }else{ %>
<input type="text" value="<%= text %>" />
<% } %>
</script>

<script type="text/javascript" src="assets/library/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/library/lodash/lodash.underscore.min.js"></script>
<script type="text/javascript" src="assets/library/backbone/backbone.min.js"></script>

<script>
(function(){

    var TodoItem = Backbone.Model.extend({
        defaults: {
            text: "",
            checked: false
        },
        toggle: function(){
            this.set('checked', !this.get('checked'));
        },
        setText: function(value){
            this.set('text', value);
        },
        clear: function() {
            this.destroy();
        }
    });

    var TodoList = Backbone.Collection.extend({
        model: TodoItem,
        addNew: function(){
            this.add(new TodoItem());
        },
        countChecked: function(){
            count = 0;
            _.each(this.models, function(item){
                if(item.get('checked')) count = count + 1;
            });

            return count;
        }
    });

    var TodoItemView = Backbone.View.extend({
        template: _.template( $('#todo-item-template').html() ),
        events: {
            "click input:checkbox": "toggle",
            "blur input:text": "store"
        },
        toggle: function(){
            this.model.toggle();
            this.render();
        },
        store: function(){
            this.model.setText( this.$('input:text').val() );
        },
        render: function(){
            $(this.el).html(
                this.template(this.model.toJSON())
            );

            return this;
        }
    });

    var TodoListView = Backbone.View.extend({
        el: "#list-holder",
        events: {
            "click #add-button": "add",
            "click #clear-button": "clear",
            "click #clear-complete-button": "clearComplete"
        },
        add: function(){
            this.collection.addNew();
        },
        clear: function(){
            this.collection.reset();
        },

        clearComplete: function(){
            element = $('#list ul input:checkbox').filter(':checked');
            element.parent().remove();

            _.each(this.collection.models, function(item){ 
                item.clear(); 
            });

            return false;
        },

        render: function(){
            element = $('#list');

            element.empty();
            element.append('<ul>');

            element = $('#list ul');

            _.each(this.collection.models, function(item){
                element.append(new TodoItemView({
                    model: item
                }).render().el);
            }, this);

            return this;
        },

        initialize: function(){
            this.render = _.bind(this.render, this);
            this.render();

            this.collection.bind('add', this.render);
            this.collection.bind('reset', this.render);
            this.collection.bind('removeChecked', this.render);
        }

    });

    var CounterView = Backbone.View.extend({
        el: '#counter',
        render: function(){
            $(this.el).text(
                _.size(this.collection) + ' / ' + this.collection.countChecked()
            );

            return this;
        },
        initialize: function(){
            this.render = _.bind(this.render, this);
            this.render();

            this.collection.bind('add', this.render);
            this.collection.bind('reset', this.render);
            this.collection.bind('change', this.render);
            this.collection.bind('removeChecked', this.render);
        }
    });

    var list = new TodoList();
    var listView = new TodoListView({
        collection: list
    });
    var listCounter = new CounterView({
        collection: list
    });

})(jQuery);
</script>

</body>
</html>