index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rock & Roll</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-51868942-1', 'balinterdi.com');
ga('send', 'pageview');
</script>
</head>
<body>
<script type="text/x-handlebars">
<div class="container">
<div class="page-header">
{{#link-to "index"}}
<h1>Rock & Roll<small> with Ember.js</small></h1>
{{/link-to}}
</div>
<div class="row">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="loading">
<div class="loading-pane">
<div class="loading-message">
Loading stuff, please have a cold beer.
<div class="spinner"></div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="artists">
<div class="col-md-4">
<div class="list-group">
<div class="list-group-item">
{{input type="text" class="new-artist" placeholder="New Artist" value=newName insert-newline="createArtist" }}
<button class="btn btn-primary btn-sm new-artist-button" {{action "createArtist"}}
{{bind-attr disabled=disabled}}>Add</button>
</div>
{{#each model}}
{{#link-to "artist.songs" this class="list-group-item artist-link"}}
{{name}}
<span class="pointer glyphicon glyphicon-chevron-right"></span>
{{/link-to}}
{{/each}}
</div>
</div>
<div class="col-md-8">
<div class="list-group">
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="artists/index">
<div class="list-group-item empty-list">
<div class="empty-message">
Select an artist.
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="artist">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="artist/loading">
<div class="loading-pane">
<div class="loading-message">
Loading the artist, please have an organic orange juice.
</div>
<div class="spinner"></div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="artist/songs">
{{#if canCreateSong}}
<div class="list-group-item">
{{input type="text" class="new-artist" placeholder=newSongPlaceholder value=newTitle insert-newline="createSong" }}
<button class="btn btn-primary btn-sm new-song-button" {{action "createSong"}}>Add</button>
{{view Ember.Select content=sortOptions
value=selectedSort
optionValuePath="content.id"
optionLabelPath="content.name"
classNames="pull-right"}}
</div>
{{/if}}
{{#each sortedSongs}}
<div class="list-group-item">
{{title}}
{{star-rating item=this rating=rating maxRating=5 setAction="setRating"}}
</div>
{{else}}
{{#unless canCreateSong}}
<div class="list-group-item empty-list">
<div class="empty-message">
There are no {{artist.name}} songs. Why don't you <a href="#" {{action "enableSongCreation"}}>create one?</a>
</div>
</div>
{{/unless}}
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="components/star-rating">
{{#each stars}}
<span
{{bind-attr class=":star-rating :glyphicon full:glyphicon-star:glyphicon-star-empty"}}
{{action "setRating" rating}}>
</span>
{{/each}}
</script>
<script src="/js/libs/jquery-1.10.2.js"></script>
<script src="/js/libs/handlebars-1.1.2.js"></script>
<script src="/js/libs/ember-1.4.0.js"></script>
<script src="/js/libs/ic-ajax.js"></script>
<script src="/js/libs/bootstrap.js"></script>
<script src="/js/app.js"></script>
</body>
</html>