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/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="drawer js-region--drawer">
  	<div class="movies-ctn">
		<h2>Movies</h2>
		<div class="scrollable">
		    <div class="scrollable__inner  js-region--movies"></div>
		</div>
	</div>
	<div class="watchlist-ctn">
		<h2>Watchlist</h2>
		<div class="js-region--watchlist"></div>
	</div>
</div>

<script type="text/template" class="tmpl-movie">
    <h1><%= title %></h1>
    <% if(watchlist) { %>
		<button class="glyphicon glyphicon-minus js-remove" aria-hidden="true"></button>
    <% } else { %>
		<button class="glyphicon glyphicon-plus js-add" aria-hidden="true"></button>
    <% } %>
</script>

SCSS

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

* {
	-webkit-font-smoothing: antialiased;
}

html,
body {
  height: 100%;
}

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

a {
    color: #191919;
}
h1 {
    font-size: 22px;
    display: inline-block;
}

.drawer {
  display: flex;
  overflow: hidden;
  height: 100%;
  
  > div {
    flex: 1 0 50%;
  }
}

h2 {
	text-align: center;
	text-decoration: underline;
}

button {
	outline: none;
	border: none;
	background: transparent;
}

.movies-ctn {
	border-right: 1px solid #191919;
}

.watchlist-ctn {
	background: #eee;
}

.scrollable {
    //position: fixed;
    top: 0;
    left: 0;
    //background: rgba(0,0,0,.75);
    //color: white;
    width: 100%;
    height: 100%;
    z-index: 999999;
    padding: 0;
}

.scrollable__inner {
    overflow: auto;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    margin: auto;
}

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

JavaScript

console.clear();

var App = {
	Models: {},
  	Views: {},
  	Collections: {},
	regions: {
        'movies': $('.js-region--movies'),
        'watchlist': $('.js-region--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();
// 		
        this.moviesView = new App.Views.Movies({
            collection: this.movies
        });

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

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

        this.regions.watchlist.empty().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,
	
	url: 'http://codepen.io/styler/pen/yYmWWY.js',
	
	parse: function(response) {
		return response[0].results;
	}
});

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

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

    tagName: 'ul',

    className: 'movies',
	
	initialize: function() {
		this.listenToOnce(this.collection, 'sync', this.render);
		
		this.fragment =...