//View for @girl, EDIT action
GirlEditView = Backbone.View.extend({
initialize: function(el, attr) {
this.variables = attr;
console.log(attr);
this.render();
},
render: function() {
var template = _.template( $("#girl_edit").html(), this.variables );
$(this.el).html( template );
$("#edit_girl").modal('show');
}
});
//View for @girl
GirlView = Backbone.View.extend({
initialize: function() {
},
template: _.template($('#girl_template').html()),
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
events: {
"click p.modify": "modify"
},
modify: function() {
//calls to modify view
new GirlEditView({el : $("#edit_girl")}, this.variables);
}
});
GirlsView = Backbone.View.extend({
initialize: function() {
var _this = this;
this.collection.each(function(girl) {
var v = new GirlView({model: girl});
_this.$el.append(v.render().el);
})
}
})
//One girl from the list
Girl = Backbone.Model.extend({
initialize: function() {
//this.view = new GirlView({el : $("#content")}, this.attributes );
}
});
//all the girls
Girls = Backbone.Collection.extend({
model: Girl,
});
//do magic!
$(document).ready(function() {
//Underscore template modification
_.templateSettings = {
escape : /\{\[([\s\S]+?)\]\}/g,
evaluate : /\{\[([\s\S]+?)\]\}/g,
interpolate : /\{\{([\s\S]+?)\}\}/g
}
//get initial data and fill the index
var list = [];
$.getJSON('girls.json', function(data) {
$.each(data, function(key, val) {
list.push( new Girl(val) );
});
var myGirls = new Girls(list);
var v = new GirlsView({ collection: myGirls });
});
});