BackboneJS delete item from a Model array - backbone.js

Question

I have this collection:
var items = new bb.Collections.QuotesCollection([
{id: 1, name: "item 1", units: []},
{id: 2, name: "item 2", units: []},
{id: 3, name: "item 3", units: []}
]);
And then I output the array "units" like so:
if(this.model.get('units').length){
$(this.el).append('<strong>Units</strong>');
$(this.el).append('<ul>');
for(x in this.model.get('units')){
$(this.el).append('<li class="unit">' + this.model.get('units')[x] + '</li>');
}
$(this.el).append('</ul>');
}
The code above is only POC stuff, so no formal templating as yet.
events: {
"keypress #addUnit" : "addUnit",
"dblclick .unit" : "deleteUnit"
},
deleteUnit: function(){
this.render(); // what do I put here!?
}
What approach do I take to delete an item (the clicked one) from the "units" array?

Answer 1

this is the quick and dirty method:
Assuming the Array's order is not changed through any other medium, you could do
deleteUnit: function() {
// get the index of the li you are clicking
var index = $('.unit').index(this);
this.model.get('units').splice(index, 1);
this.render();
}
This way you have to remember to empty your view element before every render
render: function() {
this.$el.empty();
...
// business as usual
}

Answer 2

First, you probably want to have a view object for each model, so you'd have a collection view which owns the <ul> and looks like this:
var ParentView = Backbone.View.extend({
render: function() {
var html = '<ul></ul>'; // make your html here (usually with templates)
this.$el.append(html);
this.collection.each(_.bind(this.initChild, this));
return this; // so we can chain calls if we want to.
}
initChild: function(model) {
var child = new ChildView({ model: model });
// this.$() is scoped to the view's el property
this.$('ul').append(child.render().el);
}
});
You'd then set up the child views something like this:
var ChildView = Backbone.View.extend({
events: { 'click .delete', 'deleteModel' },
render: function() {
var html = '';// make your html here (usually with templates)
this.$el.append(html);
return this;
},
deleteModel: function(ev){
ev.preventDefault();
// Removes form the collection and sends an xhr DELETE
this.model.destroy();
this.$el.remove();
}
});
The call to Model#destroy will take care of removing it from the collection and sending a DELETE to the server (assuming you have a URL set up in your collection/model).

Answer 3

As far as i understand you need to delete item from model
Person = Backbone.Model.extend({
initialize: function() {
alert("Welcome to this world");
}
});
var person = new Person({ name: "Thomas", age: 67});
delete person.name