Backbone.js & jQuery#animate Example

An example for this question: http://stackoverflow.com/questions/11137416/animate-a-html-element-after-creating-using-backbone-js

by theotheo

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<div id='container'></div>

CSS

#container {
    margin: 10px 10px;
    width:  500px;
    height: 500px;
    border: 1px solid grey;
}

.frame {
    border: 1px dotted red;
}

JavaScript

var FrameObject = Backbone.Model.extend({
    defaults: {
        top: 0,
        left: 0,
        width: 1,
        height: 1
    }
});

var FrameObjects = Backbone.Collection.extend({
    model: FrameObject
});

var ObjectView = Backbone.View.extend({
    className: 'frame',
    
    initialize: function() {
        this.model.on('change', this.animate, this);
    },
    
    render: function() {
        var params = _.extend(this.model.toJSON(),  { position: 'absolute' });
        this.$el.css(params);
        return this;
    },
    
    animate: function() {
        this.$el.animate(this.model.toJSON());
    }
});

var AppView = Backbone.View.extend({
    el: $("#container"),
    
    events: {
        "click": "createObject"
    },
    
    createObject: function(event) {
        var frameObject = new FrameObject({
            top: event.pageY,
            left: event.pageX,
            width: 100,
            height: 100
        });

        var frameObjects = new FrameObjects();

        frameObjects.add(frameObject);

        var objectView = new ObjectView({
            model: frameObject
        });
        this.$el.append(objectView.render().el);
        
        setTimeout(function() {
            frameObject.set({
                // 500 — width of #container
                top: Math.random() * 500,
                left: Math.random() * 500
            })
        }, 1000);
    }
});

var appView = new AppView();