In this article we will create a Backbone application for creating various shapes. Here we create a rectangle and circle and we can change the color and drag these shapes around.
In this article we need to create the three files "main.js"," main.css" and "index.html". We will now start to create the application.
Now we need to add a different JavaScript file to our application. First we add our own script file in this project.
$(function () {
var Shape = Backbone.Model.extend({
defaults: { x: 40, y: 40, width: 100, height: 100, color: 'brown' },
setTopLeft: function (x, y) { this.set({ x: x, y: y }); },
setDim: function (w, h) { this.set({ width: w, height: h }); },
isCircle: function () { return !!this.get('circle'); }
});
var Collect = Backbone.Collection.extend({ model: Shape });
var CollectView = Backbone.View.extend({
id: 'page',
views: {},
initialize: function () {
this.collection.bind('add', function (model) {
this.views[model.cid] = new ShapeView({ model: model, id: 'view_' + model.cid }).render();
}, this);
},
render: function () {
return this;
}
});
var ShapeView = Backbone.View.extend({
initialize: function () {
$('#page').mousemove(this, this.mousemove).mouseup(this, this.mouseup);
this.model.bind('change', this.updateView, this);
},
render: function () {
$('#page').append(this.el);
$(this.el).html('<div class="shape"/>'
+ '<div class="control change-color hide"/>'
)
.css({ position: 'absolute', padding: '10px' });
if (this.model.isCircle()) {
this.$('.shape').addClass('circle');
}
this.updateView();
return this;
},
updateView: function () {
$(this.el).css({
left: this.model.get('x'),
top: this.model.get('y'),
width: this.model.get('width') - 10,
height: this.model.get('height') - 10
});
this.$('.shape').css({ background: this.model.get('color') });
},
events: {
'mouseenter .shape': 'hoveringStart',
'mouseleave': 'hoveringEnd',
'mousedown .shape': 'draggingStart',
'mousedown .change-color': 'changeColor',
},
hoveringStart: function (e) {
this.$('.control').removeClass('hide');
},
hoveringEnd: function (e) {
this.$('.control').addClass('hide');
},
draggingStart: function (e) {
this.dragging = true;
this.initialX = e.pageX - this.model.get('x');
this.initialY = e.pageY - this.model.get('y');
return false; // prevents text selection
},
changeColor: function (e) {
this.model.set({ color: prompt('Enter Color', this.model.get('color')) });
},
mouseup: function (e) {
if (!e || !e.data) return;
var self = e.data;
self.dragging = false;
},
mousemove: function (e) {
if (!e || !e.data) return;
var self = e.data;
if (self.dragging) {
self.model.setTopLeft(e.pageX - self.initialX, e.pageY - self.initialY);
}
}
});
var collect = new Collect();
var collectView = new CollectView({ collection: collect });
collectView.render();
$('#new-rectangle').click(function () {
collect.add(new Shape());
});
$('#new-circle').click(function () {
collect.add(new Shape({ circle: true }));
});
});
In the code above we defined the default property for Backbone for using values/properties in model as defaults. Here we defined the three default values height, width and color.
In the Shape View the code of the view will go through the ShapeModel. The code of the view is for managing the elements of the HTML, these elements represent the shape itself and control the elements that decorates the shapes.