Artist import, page

app/assets/javascripts/application.js

@@ -12,4 +12,11 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require mustache
+//= require hogan
+//= require underscore
+//= require backbone
+//= require backbone_rails_sync
+//= require backbone_datalink
+//= require backbone/beat_haven
 //= require_tree .

app/assets/javascripts/backbone/beat_haven.js.coffee

@@ -0,0 +1,18 @@
+#= require_self
+#= require_tree ./templates
+#= require_tree ./models
+#= require_tree ./views
+#= require_tree ./routers
+
+window.BeatHaven =
+  Models: {}
+  Collections: {}
+  Routers: {}
+  Views: {}
+
+  init: ->
+    new BeatHaven.Routers.Artist()
+    Backbone.history.start();
+
+$ ->
+  BeatHaven.init()

app/assets/javascripts/backbone/models/artist.js.coffee

@@ -0,0 +1,2 @@
+class BeatHaven.Models.Artist extends Backbone.Model
+  urlRoot: "/api/artists"

app/assets/javascripts/backbone/routers/artist_router.js.coffee

@@ -0,0 +1,9 @@
+class BeatHaven.Routers.Artist extends Backbone.Router
+  routes:
+    "artist/:name": "show"
+
+  show: (name) ->
+    artist = new BeatHaven.Models.Artist(id: name)
+    artist.fetch()
+    view = new BeatHaven.Views.ArtistShow(model: artist)
+    $("#main").html(view.render().el)

app/assets/javascripts/backbone/templates/artists/show.mustache

@@ -0,0 +1,39 @@
+<div class="artist-page">
+  <h1>{{name}}</h1>
+  <div class="artist-info">
+    <div class="pic">
+      <img src="{{pic}}" alt="{{name}}">
+    </div>
+    <div class="bio">{{bio}}</div>
+  </div>
+  <div class="albums">
+  {{#albums}}
+    <div class="album">
+      <div class="pic">
+        <img src="{{pic_safe}}" alt="{{title}}"><br>
+        <a href="" class="btn btn-success play-all"><i class="icon-plus icon-white"></i> Add to playlist</a>
+        <a href="" class="btn btn-info play-all"><i class="icon-play icon-white"></i> Play</a>
+      </div>
+      <h2 class="title">{{title}} ({{year}})</h2>
+      <div class="tracks">
+        <table class="table">
+          <tbody>
+          {{#tracks}}
+            <tr>
+              <td class="title">
+                <a href="" class="btn btn-round track-play"><i class="icon-play"></i></a>
+                <a href="" class="track-link">{{title}}</a>
+              </td>
+              <td class="length">
+                <span class="length">{{length}}</span>
+                <a href="" class="btn btn-round track-add"><i class="icon-plus"></i></a>
+              </td>
+            </tr>
+          {{/tracks}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  {{/albums}}
+  </div>
+</div>

app/assets/javascripts/backbone/views/artist/artist_show.js.coffee

@@ -0,0 +1,10 @@
+class BeatHaven.Views.ArtistShow extends Backbone.View
+  template: HoganTemplates["backbone/templates/artists/show"]
+
+  initialize: ->
+    @model.on("change", @render, this)
+
+  render: ->
+    return this if typeof @model.attributes.id is "string"
+    $(@el).html(@template.render(@model.toJSON()))
+    this