BB Skeleton

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<div class="app js-app">
  <div class="movies-ctn js-movies"></div>
  <div class="watchlist-ctn js-watchlist"></div>
</div>

<script type="text/template" class="tmpl-movie">
    <h1><%= title %></h1>
    <% if(watchlist) { %>
    	<button class="js-remove">Remove</button>
    <% } else { %>
    	<button class="js-add">Add</button>
    <% } %>
</script>

SCSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}
h1 {
    font-size: 22px;
    display: inline-block;
}
.app {
  display: flex;
  
  > div {
    flex: 1 0 50%;
  }
}

.movies {
}

.movie {
  border-bottom: 1px solid #191919;
  padding: 5px;
}

JavaScript

console.clear();

// Movie Data
var data = [
  {
      "id": 1,
      "title": "Reservoir Dogs"
  },
  {
  	"id": 2,
    "title": "Pulp Fiction"
  }
];

var App = {
	Models: {},
  	Views: {},
  	Collections: {},
	regions: {
        'movies': $('.js-movies'),
        'watchlist': $('.js-watchlist')
  	},
  	start: function() {

        _.extend(this, Backbone.Events);

        this.createMovies();
        this.createWatchlist();

        this.listenTo(Backbone.Events, 'add:watchlist', this.onAddMovie);
        this.listenTo(Backbone.Events, 'remove:watchlist', this.onRemoveMovie);
	},
    createMovies: function() {
        this.movies = new App.Collections.Movies(data, {parse: true});

        this.moviesView = new App.Views.Movies({
            collection: this.movies
        });

        this.regions.movies.html( this.moviesView.render().el );
	},
	createWatchlist: function() {
        this.watchlist = new App.Collections.Watchlist();

        this.watchlistView = new App.Views.WatchlistMovies({
            collection: this.watchlist
        });

        this.regions.watchlist.html( this.watchlistView.render().el );
    },
	onAddMovie: function(model) {
        model.set('watchlist', true);
        this.watchlist.add(model);
	},
	onRemoveMovie: function(model) {
        model.set('watchlist', false);
        this.watchlist.remove(model);
	}
};


// Classes
App.Models.Movie = Backbone.Model.extend({
    defaults: {
    	watchlist: false
    },
  
    toggleWatchlist: function() {
    	this.set('watchlist', !this.get('watchlist'));
    }
});

App.Collections.Movies = Backbone.Collection.extend({
	model: App.Models.Movie
});

App.Collections.Watchlist = Backbone.Collection.extend({
	model: App.Models.Movie
});

App.Views.Movies = Backbone.View.extend({

    tagName: 'ul',

    className: 'movies',

    render: function() {

    	this.collection.forEach(this.addMovie, this);

    	return this;
    },
    
    addMovie: function(movie) {
    	var movie = new...