rmw · May 19, 2014 15:22
diff --git a/albums.html b/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>
	<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">★</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>