gistfile1.js

APE.manager.models.app = Backbone.Model.extend({
    dispatcher: APE.events,
    defaults: {
        dirty: false,
        model_count: 0,
    },
    initialize: function() {
        this.listenTo(this.dispatcher, 'dirty', this.handle_dirt);
    },
    handle_dirt: function(dirt) {
        console.log('dirt change!', dirt);
        this.set('dirty', dirt);
    }
});


APE.manager.app = Backbone.View.extend({
    dispatcher: APE.events,
    events: {
        'click .ape-save': 'handle_save',
    },
    initialize: function() {
        this.model = new APE.manager.models.app;

        this.render();

        var draggable = this.options.draggable || '.ape-widget-toolbar';
        var droppable = this.options.droppable || '.ape-canvas-area';

        var data = this.options.data;
        var draggable_data = data['draggable'] || [];
        var droppable_data = data['droppable'] || [];

        var drag_collection = new APE.manager.collections.draggable(draggable_data);
        var drop_collection = new APE.manager.collections.droppable(droppable_data);

        this.model.on('change:dirty', this.handle_dirt, this);
        this.url = this.options.url || '';

        this.draggable = new APE.manager.views.draggable({el: draggable,
                                                         draggable: draggable,
                                                         droppable: droppable,
                                                         collection: drag_collection});

        this.droppable = new APE.manager.views.droppable({el: droppable,
                                                         draggable: draggable,
                                                         collection: drop_collection,
                                                         drag_collection: drag_collection});
    },
    handle_dirt: function() {
        if (this.model.get('dirty')) {
            this.$('.ape-save').removeClass('inactive').addClass('active');
            this.$('.ape-reset').removeClass('inactive').addClass('active');
        }
        else {
            this.$('.ape-save').removeClass('active').addClass('inactive');
            this.$('.ape-reset').removeClass('active').addClass('inactive');
        }
    },
    handle_save: function() {
        var that = this;
        console.log(that.droppable.collection.toJSON());
        $.post(that.url, {'canvas_data': JSON.stringify(that.droppable.collection.toJSON())}, function(data) {
            data = $.parseJSON(data);
            if (data.success) {
                _.each(data.canvas_layout, function(widget) {
                    that.droppable.collection.get(widget.cid)
                                   .set('canvas_widget_id', widget.canvas_widget_id);
                });
            }
        });
        return false;
    },
    render: function() {
        var html = APE.templates['manager/app']();
        this.$el.html(html);

        return this;
    }
});