backbone_ex.html | searchcode

/city_aware/templates/backbone_ex.html

https://github.com/hack4reno2011/Rock-Star-Scientists
HTML | 253 lines | 234 code | 19 blank | 0 comment | 0 complexity | 048f20cdf560798d1ff02b2121d16334 MD5 | raw file

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
	
	<link rel="stylesheet" href="/static/css/style.css">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/underscore.js"></script>
    <script src="/static/js/backbone.js"></script>
    <style type="text/css">
.editHolder {
    width:500px;
}
.label {
    width:500px;
    clear:both;
}
.options {
    float:right;
}
    </style>
    <script>

var itemTemp = '<span style="color:black;"><%= name %> <%= id %></span><span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>'
var itemTemp2 = '<div class="label"><%= name %> <%= id %><div class="options"><button class="delete">x</button></div>'
var noIdItem = '<div class="label"><%= longform %>(<%= latitude %>,<%= longitude %>)<div class="options"><button class="delete">x</button></div></div>'
var editTemp = '<div class="editHolder"><input class="labelInput" value="<%= longform %>"></input><div class="options"><button class="delete">x</button></div></div>'

//var data = [{'name': "USA"}, {'name': "UK"}, {'name': "France"}];
var data = []

$(function() {

    var Item = Backbone.Model.extend({
        defaults: {'longform': "Unknown"},
        urlRoot: '/api/rawaddress/',
        
        //url: function() {
        //    console.log("calling url");
        //    var base =  '/api/testdata/'; 
        //    if (this.isNew()) {
        //        return base;
        //    } else {
        //        return base + this.id + '/'; //don't forget the slash!
        //    } 
        //},
        //parse: function(resp, xhr) {
        //    console.log("parse:", resp, xhr);
        //}
    });

    var List = Backbone.Collection.extend({
        model: Item,
        url: '/api/rawaddress/',
        parse: function(data) {
            console.log("PARSING!");
            console.log(data);
            return data.objects;
        },
        comparator: function(country) {
            return -country.get('id');
        }
    });

    var ItemView = Backbone.View.extend({
        tagName: 'li',
        className: 'green',
        events: {
            'click button.delete': 'remove',
            'dblclick div.label': "editLabel",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'unrender', 'swap', 'remove', 'editLabel', 'saveLabel');
            this.model.bind('change', this.render);
            this.model.bind('remove', this.unrender);
        },
        render: function() {
            $(this.el).html(_.template(noIdItem, this.model.toJSON()));
            return this;
        },
        editLabel: function() {
            console.log("editing label!");
            //change the template to editing mode
            $(this.el).html(_.template(editTemp, this.model.toJSON()))
            $('input.labelInput', this.el).change(this.saveLabel);
            return this;
        },
        saveLabel: function() {
            console.log("SAVING LABEL!");
            //TODO confirm new text, delete if empty
            var newText = $('input.labelInput', this.el).val();
            console.log("CHANGED TEXT:", newText);
            this.model.set({'longform': newText});
            this.model.save();
        },
        unrender: function() {
            $(this.el).remove();
        },
        swap: function() {
            this.model.set({'longform': this.model.get('cid'), 'cid': this.model.get('longform')});
        },
        remove: function() {
            //this.model.destroy();
            console.log("preparing to destroy:", this.model);
            this.model.destroy({error: function(model, response) {
                    console.log("DELETE error:", response);
                },
                success: function(model, response) {
                    //apparently, reports success on 301 ?!?!
                    console.log("DELETE success:", model, response);
                }
            });
        }
    });
    
    var iList = (new List()).add(data);
    
    var AppView = Backbone.View.extend({

        el: $('body'),
        events: {
            'click button#refresh': "refreshList",
            'click button#new': "newItem",
            'click button#save': "saveList",
            'click button#sortByName': "sortByName",
            'click button#sortById': "sortById",
        },
        initialize: function() {
            _.bindAll(this, 'render', 'addItem', 'appendItem', 'saveList', 'sortByName', 'renderList', 'sortById', 'newItem', 'refreshList');
            this.collection = iList.bind('add', this.appendItem);
            this.counter = 0;
            this.sortOrder = -1;
            this.render();
            this.collection = iList.bind('reset', this.renderList);
	        this.collection.fetch({data: {latitude__lt: 39.52, latitude__gt: 39.50}}); //fires 'reset'
            //this.collection.fetch({add: true}); //otherwise list will 'reset'
            //this.collection.fetch({add: true, data: {offset: 50}}); //otherwise list will 'reset'
            //does collection sort upon 'reset'?
            //this.collection.sort(); //should fire 'reset'
            
        },
        render: function() {
            $(this.el).append("<button id='refresh'>Refresh</button>").append("<button id='sortByName'>Sort by Name</button>").append("<button id='sortById'>Sort by ID</button>").append("<input type='text'></input>").append("<button id='new'>New Item</button>").append("<ul></ul>");
            this.renderList();
        },
        renderList: function() {
            $('ul', this.el).empty();
            console.log("appending", this.collection.models.length, 
"default objects");
            //_ each?
            for (var i = 0; i < this.collection.models.length; i++) {
                this.appendItem(this.collection.models[i]);
            }
        },
        addItem: function() {
            console.log("CREATING ITEM!");
            //this.counter++
            this.collection.add(new Item({'longform': "new item"}));
        },
        appendItem: function(item) {
            //console.log("APPENDING ITEM:", item);
            var itemView = new ItemView({
                model: item
            });
            $('ul', this.el).append(itemView.render().el);
        },
        saveList: function() {
            console.log("ATTEMPTING TO SAVE!"); //necessary?
        },
        sortByName: function() {
            this.sortOrder = -this.sortOrder;
            this.collection.comparator = buildNameComparator(this.sortOrder);
            console.log("SORT?", this.sortOrder);
            this.collection.sort();
        },
        sortById: function() {
            this.sortOrder = -this.sortOrder;
            this.collection.comparator = buildIdComparator(this.sortOrder);
            this.collection.sort();
        },
        newItem: function() {
            console.log("NEW ITEM!");
            var newText = $('input', this.el).val();
            if (newText) {
                //TODO not empty?
                //console.log("NEW TEXT:", newText);
                var randItem = new Item({'longform': newText});
                randItem.save({}, {success: buildSuccessReponse(this.collection)});
                var newText = $('input', this.el).val("");
            }
            
            //randItem.save(randItem);
            //randItem.save({}, {success: buildSuccessReponse(this.collection)});
            
            //randItem.save({}, {error: function(model, response) {
            //        console.log("CREATE ERROR:", model, response);
            //    },
            //    success: function(model, response) {
            //        //apparently, reports success on 301 ?!?!
            //        console.log("CREATE SUCCESS:", model, response);
            //    }
            //});
            //this.appendItem(randItem);
            //this.renderList();
        },
        refreshList: function() {
            console.log("refresh collection");
            this.collection.fetch(); //fires 'reset'
        }
    });
    
    function buildIdComparator(sortOrder) {
        return function(country) {
            return sortOrder * country.get('id');
        }
    }
    function buildNameComparator(sortOrder) {
        return function(Model) {
            var str = Model.get("longform");
            str = str.toLowerCase();
            str = str.split("");
            str = _.map(str, function(letter) { 
                return String.fromCharCode(sortOrder * (letter.charCodeAt(0)));
            });
            return str;
        }
    }
    function buildSuccessReponse(collection) {
        return function(model, response) {
            console.log("POST success", model, response);
            console.log(model.parse(response));
            collection.add(model);
            collection.sort();
        }
    }

    var app = new AppView();
});
    </script>
</head>

<body>

    <div id="container">
        <div id="main">
        </div>
    </div>

</body>
</html>