Skip to content

Instantly share code, notes, and snippets.

@ndelage

ndelage/albums.html

Last active August 29, 2015 13:59
Show Gist options
  • Save ndelage/10873660 to your computer and use it in GitHub Desktop.
Save ndelage/10873660 to your computer and use it in GitHub Desktop.
Download ZIP
Album List Backbone Toy
Raw
albums.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<style>
.album {
float: left;
margin: 20px;
padding: 10px;
}
.album {
text-align: center;
}
.album img {
border: solid 4px white;
}
.favorite {
background-color: yellow;
}
.mark-favorite:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div class="album-list">
</div>
</body>
</html>
<script id="album-template" type="text/template">
<img src="<%=img%>" style="width:200px; height: 200px;"/>
<p><%=name%> <span class="mark-favorite">&#9733;</span></p>
</script>
<script type="text/javascript">
var Album = Backbone.Model.extend({
toggleFavorite: function() {
this.set({favorite: !this.get('favorite')});
}
});
var AlbumView = Backbone.View.extend({
tagName: "div",
className: "album",
events:
{
"click .mark-favorite": "favorite"
},
initialize: function() {
_.bindAll(this, 'render');
this.model.on('change:favorite', this.render);
this.template = $("#album-template").html();
},
render: function() {
var compiledTemplate = _.template(this.template);
this.$el.html(compiledTemplate(this.model.attributes));
// TODO Adding the favorite class should be done by rendering
// the template, not manually adding/removing a class.
if(this.model.get('favorite') === true) {
this.$el.addClass('favorite');
} else {
this.$el.removeClass('favorite');
}
},
favorite: function(e) {
this.model.toggleFavorite();
}
});
$(document).ready(function() {
var albumsData = [{name: "Razon Meditacion Accion - Alika",
img: "http://1.bp.blogspot.com/-MzOWBVGeR0s/UQcJD9r5_VI/AAAAAAAAALI/4Z_zIkhmUlg/s1600/Razon+meditacion+accion.jpg",
favorite: true},
{name: "Collections - Pato Banton",
img: "http://ecx.images-amazon.com/images/I/41W21V8SAXL.jpg"}];
_.each(albumsData, function(data) {
var album = new Album(data);
var albumView = new AlbumView({model: album});
albumView.render();
$(".album-list").append(albumView.$el);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment