D3 Examples - Bands.

xxxxxxxxxx
 
<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Bands.</title>
    <style>
@import url(//fonts.googleapis.com/css?family=Lato:300,400,900);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
​
body {
    color: #abc;
    font: 100% Lato, Helvetica, Arial, sans-serif;
    margin: 0 auto;
    padding: 50px;
    text-align: center;
}
​
h1 { color: #456; }
​
ul {
    list-style-type: none;
    padding: 0;
}
​
a {
    color: inherit;
    text-decoration: none;
}
​
.band {
    width: 280px;
    border-top: 1px solid #ddd;
    display: inline-block;
    padding: 20px;
    text-align: left;
    vertical-align: top;
​
    &-name {
        color: #456;
        font-size: 125%;
        font-weight: normal;
        margin: 0;
    }
}
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.4.0/sass.min.js"></script>
    <script>
        // this allows the styles above to retain css code coloring in a
        // text editor instead of having everything in this script tag
        var head = document.getElementsByTagName('head')[0],
        style = document.getElementsByTagName('style')[0],
        css = Sass.compile(style.innerHTML);
        head.removeChild(style);
        document.write("<style>"+ css +"</style>");
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script>
        var BandsCollection = Backbone.Collection.extend({
            url: "https://gist.githubusercontent.com/mattborn/6351a34d29250ecd4519/raw/bands.json",
            parse: function (r) {
                return r.bands;
            }
        });
​
        var BandsView = Backbone.View.extend({
            el: 'body',
            initialize: function () {
                this.collection.on('reset', this.render, this);
                this.collection.fetch({reset: true});
            },
            render: function () {
                var band = $('#template').html();
                console.log(this.collection.toJSON());
                this.collection.each(function (m) {
                    $('.bands').append( _.template(band, m.toJSON()) );
                });
            }
        });
​
        window.bandsView = new BandsView({
            collection: new BandsCollection
        });
    </script>
</head>
<body>
    <h1>Bands.</h1>
    <ul class="bands"></ul>
</body>
</html>
<script id="template" type="text/template">
    <li class="band">
        <h2 class="band-name"><%= name %></h2>
        <% var albums = albums || []; _.each(albums, function (album) { %>
            <p><%= album.title %></p>
        <% }); %>
        <% var tracks = tracks || [];
            _.each(tracks, function (track) {
                var youtube = track.youtube || null; %>
            <p><%  if (youtube) { %><a href="//www.youtube.com/watch?v=<%= youtube %>" target="_blank"><i class="fa fa-youtube-play"></i> <%= track.title %></a><% } else { %><%= track.title %><% } %></p>
        <% }); %>
    </li>
</script>
    