Separar la logica de la aplicacion con templates

var source =$("#song-template").html();

undefined

source

" <span> {{name}} - {{author}} </span> <span class="right"> <a href="" class="action icon-add gray"></a> <a href="" class="action icon-love gray"></a> <a href="" class="action icon-share gray"></a> </span> "

var template = Handlebars.compile(source);

undefined

var song = new Sfotipy.Song ({ name:"Marinlyn Monroe", author : "Pharell Williams" });

undefined

song.toJSON();

Object {name: "Marinlyn Monroe", author: "Pharell Williams"}

var html = template(song.toJSON());

undefined

var song = new Sfotipy.Song ({ name:"Thuder", author : "ACDC" });

undefined

var song1 = new Sfotipy.Song ({ name:"One", author : "Metallica" });

undefined

var songs = new Sfotipy.Songs([song, song1]);

undefined

songs

child {length: 2, models: Array[2], _byId: Object, constructor: function, model: function…}

songs.at(0);

child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}

songs.at(0).toJSIN();

TypeError: undefined is not a function

songs.at(0).toJSoN();

TypeError: undefined is not a function

songs.at(0).toJSON();

Object {name: "Thuder", author: "ACDC"}

songs.at(1).toJSON();

Object {name: "One", author: "Metallica"}

song.forEach(function(s){console.log(s.toJSON());});

TypeError: undefined is not a function

songs.forEach(function(s){console.log(s.toJSON());});

Object {name: "Thuder", author: "ACDC"} VM6044:2

Object {name: "One", author: "Metallica"} VM6044:2

[

child

,

child

]

songs.where({name: "One"});

var song = new Sfotipy.Song ({ name:"Thuder", author : "ACDC" });

undefined

var songView = new Sfotipy.SongView({ model: song, el: $(".list")});

undefined

songView.render();

undefined

song.set({name: "Marilyn Monroe", author:"Pharrell Williams"});

child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}