|
require.config({ |
|
shim: { |
|
backbone: { |
|
deps: ["jquery", "underscore"], |
|
exports: "Backbone" |
|
}, |
|
underscore: { |
|
exports: "_" |
|
} |
|
}, |
|
paths: { |
|
backbone: "components/backbone/backbone", |
|
jquery: "components/jquery/jquery", |
|
underscore: "components/underscore/underscore" |
|
} |
|
}); |
|
|
|
define([ |
|
"underscore", |
|
"backbone" |
|
], function(_, Backbone) { |
|
|
|
var Post = Backbone.Model.extend({ |
|
defaults: { |
|
"title": "", |
|
"post": "", |
|
"mood": "neutral", |
|
"backgroundColor": "white", |
|
"colors": ["white", "red", "green", "blue"] |
|
}, |
|
|
|
validate: function(data) { |
|
var mood = _.chain(["title", "post", "mood"]) |
|
.map(function(check) { |
|
return !data[check] ? "Post needs a " + check : false; |
|
}) |
|
.compact() |
|
.value(); |
|
return mood.length ? mood : false; |
|
} |
|
}); |
|
|
|
var Blog = Backbone.Collection.extend({ |
|
model: Post |
|
}); |
|
|
|
function renderMethod() { |
|
var data = this.model.toJSON(), |
|
content = this.template(data); |
|
this.$el.html(content); |
|
return this; |
|
} |
|
|
|
var PostView = Backbone.View.extend({ |
|
edit: function(e) { |
|
var view = new EditView({ model: this.model }); |
|
view.setElement(this.el); |
|
view.render(); |
|
e && e.preventDefault(); |
|
}, |
|
events: { |
|
"click .js_edit": "edit" |
|
}, |
|
initialize: function() { |
|
this.model.on("change", this.render, this); |
|
}, |
|
render: renderMethod, |
|
template: _.template($("#postTemplate").html()) |
|
}); |
|
|
|
var EditView = Backbone.View.extend({ |
|
"delete": function(e) { |
|
e.preventDefault(); |
|
this.model.collection.remove(this.model); |
|
}, |
|
events: { |
|
"click .js_save": "save", |
|
"click .js_delete": "delete" |
|
}, |
|
render: renderMethod, |
|
save: function(e) { |
|
e.preventDefault(); |
|
var data = {}; |
|
_.each(["post", "title", "mood", "backgroundColor"], function(item) { |
|
data[item] = this.$("#" + item).val(); |
|
}); |
|
data.updated = new Date().getTime(); |
|
if(this.model.set(data, { validate: true })) { |
|
this.undelegateEvents(); |
|
} |
|
}, |
|
template: _.template($("#editTemplate").html()) |
|
}); |
|
|
|
var PostList = Backbone.View.extend({ |
|
add: function(model) { |
|
this.views[model.cid] = new PostView({ model: model }); |
|
this.$el.prepend(this.views[model.cid].el); |
|
this.views[model.cid].edit(); |
|
}, |
|
events: { |
|
"click .js_new_post": "newPost" |
|
}, |
|
initialize: function() { |
|
this.views = {}; |
|
this.collection = new Blog(); |
|
this.collection.on("add", this.add, this); |
|
this.collection.on("remove", this.remove, this); |
|
}, |
|
newPost: function(e) { |
|
e.preventDefault(); |
|
var post = new Post(); |
|
this.collection.add(post); |
|
}, |
|
remove: function(model) { |
|
var view = this.views[model.cid]; |
|
if(view) { |
|
view.off(); |
|
view.$el.detach(); |
|
delete this.views[model.cid]; |
|
} |
|
} |
|
}); |
|
|
|
var blog = new PostList({ el: document.getElementById("app") }); |
|
|
|
}); |