Backbone.js customer grid view object.

gistfile1.txt

window.CustomerListView = Backbone.View.extend({

    template: _.template($('#CustomerListView').html()),
    
    page: 1,
    sort: 'asc',
    
    search: {
        name: "",
        email: "",
        city: "",
        country: "",
        create_date: ""
    },

    initialize: function (options) {
        this.page = this.options.page;
        this.sort = this.options.sort;
        this.model.bind("reset", this.render, this);
        this.model.bind("change", this.change, this);
    },

    events: {
        "mouseenter tr td button": "buttonOn",
        "mouseleave tr td button": "buttonOff",
        "click tr": "tableRowClick",
        "click tr td button#delete": "tableRowDeleteButton",
        "click tr td button#view": "tableRowViewButton",
        "click #grid-submit": "gridsubmit",
        "click #grid-reset": "gridreset"
    },

    render: function (event) {
        $(this.el).html(this.template({
            customers: this.model,
            page: this.page,
            sort: this.sort == 'asc' ? 'desc' : 'asc',
            search: this.search
        }));
        $(this.el).prepend(new PaginatorTemplate({
            model: this.model
        }).render().el);
        return this;
    },

    buttonOn: function (event) {
        $(this.el).undelegate('tr', 'click');
    },

    buttonOff: function (event) {
        $(this.el).delegate('tr', 'click', this.tableRowClick);
    },

    tableRowClick: function (event) {
        utils.hideAlert();
        var href = $(event.target).closest('tr').attr('data-href');
        if (typeof(href) !== "undefined") {
            app.navigate(href, true);  
        }
    },

    tableRowDeleteButton: function (event) {
        utils.hideAlert();
        var customerId = $(event.target).closest('tr').attr('id');
        customerDelete.set({
            customer_id: customerId
        });
        //customerDelete.get("customer_id");
        customerDelete.destroy({
            success: function (response) {
                app.navigate("/", true);
                //window.history.back();
            }
        });
        return false;
    },

    tableRowViewButton: function (event) {
        var customerId = $(event.target).closest('tr').attr('id');
        app.navigate("#index/view/customer_id/" + customerId, true);
    },
    
    gridsubmit: function (event) {
        this.search.name = this.$("input[id='data[name]']").val();
        this.search.email = this.$("input[id='data[email]']").val();
        this.search.city = this.$("input[id='data[city]']").val();
        this.search.country = this.$("input[id='data[country]']").val();
        this.search.create_date = $("input[id='data[create_date]']", this.el).val();
        this.model.fetch({
            data: this.search,
            type: 'POST'
        });
    },
    
    gridreset: function (event) {
        app.navigate("/", true);
    }

});