$(function(){ PlaylistItem = Backbone.Model.extend({}); Playlist = Backbone.Collection.extend({ model: PlaylistItem, localStorage: new Store("playlist"), comparator: function(item) { return item.attributes.order_id; } }); window.items = new Playlist; PlaylistItemView = Backbone.View.extend({ tagName: 'tr', template: templates.playlist_item, render: function() { var model = this.model; var item = model.toJSON(); var el = $(this.el); el.html(this.template(item)); el.attr('id', 'cid-' + model.cid); $('a.play', this.el).click(function() { while(model.collection.indexOf(model) > 0) { model.collection.remove(model.collection.at(0)); } playsound(model); return false; }); $('a.delete', this.el).click(function() { items.remove(model); playlist.hintnext(); return false; }); return this; } }); PlaylistView = Backbone.View.extend({ el: $('#playlist tbody'), initialize: function() { items.bind('add', this.addOne, this); items.bind('remove', this.removeOne, this); items.bind('reset', this.addAll, this); this.current = null; items.fetch(); }, add: function(item) { item.order_id = items.length+1; var model = items.create(item); if(items.indexOf(model) < 2) { sound_hint(model); } }, addOne: function(item) { var view = new PlaylistItemView({model: item}); var el = view.render().el; if(item.attributes.nocache) $(el).addClass('nocache'); $('#playlist').append(el); if(item.attributes.cache !== undefined || item.attributes.nocache !== undefined) { delete item.attributes.cache; delete item.attributes.nocache; item.save(); } }, removeOne: function(item) { $('#playlist #cid-' + item.cid).remove(); item.destroy(); items.each(this.refreshOrder); }, refreshOrder: function(item) { item.attributes.order_id = items.indexOf(item)+1; item.save(); }, addAll: function() { items.each(this.addOne); }, next: function() { var item = items.at(0); var next = items.at(1); items.remove(item); this.render(); return next; }, hintnext: function() { var next = items.at(1); if(next) sound_hint(next); } }); window.playlist = new PlaylistView; });