BB101: Basic View /w Collection

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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<div class="js-app"></div>

<script type="text/template" class="tmpl-movie">
    <a href="/movie/<%= id %>" class="movie">
    	<img src="http://image.tmdb.org/t/p/w500/<%= poster_path %>" alt="<%= title %>">
    	<h2 class="movie__info"><%= title %></h2>
	</a>
</script>

SCSS

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

.movie {
    display: block;
    position: relative;
    color: black;
    background: black;
    overflow: hidden;

    &__info {
        padding: 8px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
        color: white;
    }

    img {
        width: 100%;
        display: block;
    }

	h2 {
        margin: 0;
    }
}

Babel + JSX

console.clear();

const data = [{
    "id": 140607,
    "overview": "A continuation of the saga created by George Lucas, set thirty years after Star Wars: Episode VI – Return of the Jedi.",
    "release_date": "2015-12-18",
    "poster_path": "/fYzpM9GmpBlIC893fNjoWCwE24H.jpg",
    "title": "Star Wars: Episode VII - The Force Awakens",
    "vote_average": 7.8
}, {
	"id": 281957,
	"overview": "In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against those who left him for dead after a bear mauling.",
	"release_date": "2015-12-25",
	"poster_path": "/oXUWEc5i3wYyFnL1Ycu8ppxxPvs.jpg",
	"title": "The Revenant",
	"vote_average": 5
}];

// Classes.
const Movie = Backbone.Model.extend();
    
const Movies = Backbone.Collection.extend({
	model: Movie
});

const MoviesView = Backbone.View.extend({
	className: 'movies',
    
    render() {
		this.collection.each(this.addMovie, this);
        return this;
    },
    
    addMovie(movie) {
    	const movieView = new MovieView({
        	model: movie
        });
        
        this.$el.append(movieView.render().el);
    }
});

const MovieView = Backbone.View.extend({

	template: _.template($('.tmpl-movie').html()),
    
    render() {
    	this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

// Instances.
const 
	movies = new Movies(data),
    moviesView = new MoviesView({
    	collection: movies
    });

$('.js-app').html( moviesView.render().el );