JSFiddle - React, Tailwind, and code Playground

by alexchetv

HTML

<script src="https://raw.github.com/trek/ember-tunes-noodling/master/public/js/vendor/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.min.js"></script>
<!doctype html>

<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">

    <title>Ember Tunes</title>
    <meta name="author" content="David Goodlad <[email protected]>">
    <meta name="author" content="Justin Giancola <[email protected]>">

    <link rel="stylesheet" href="style/screen.css" media="screen, projection">
    <link rel="stylesheet" href="style/fancypants.css" media="screen, projection">

    <script type="text/x-handlebars" data-template-name="navbar">
      <nav>
        {{#unless controller.isPlaying}}
          <button class="control play" {{action play}}>Play</button>
        {{else}}
          <button class="control pause" {{action pause}}>Pause</button>
        {{/unless}}
        <button class="control prev" {{action prev}}>Prev</button>
        <button class="control next" {{action next}}>Next</button>
      </nav>
    </script>

    <script type="text/x-handlebars" data-template-name="playlist">
      <div class="playlist">
        <h1>Playlist</h1>
        {{view Tunes.NavbarView}}
        <ul class="albums">
          {{#each album in controller}}
            {{view Tunes.AlbumView albumBinding="album"}}
          {{/each}}
        </ul>
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="album">
      <button class="queue add" {{action queueAlbum album}}>
        <img src="/images/add.png">
      </button>
      <button class="queue remove" {{action dequeueAlbum...

JavaScript

// this app is something I am going to interactively develop during a live
// coding demo at a local user group. it starts off with the final markup
// from the simple music application developed in the PeepCode Backbone
// screncasts. from there I will extract views, controllers, and wire
// everything together. this is the finished product.

// the goal is to demonstrate how to use Ember to interactively
// develop an application and showcase how it helps you to develop
// applications the way that you think about them. in particular,
// as you continue to add features you don't get bogged down in housekeeping
// and low-level details. watching the Backbone screencasts where this app
// is developed, it is striking how things start off very simply but
// end up incorporating a lot of accidental complexity by the time the
// second screencast is finished.

// anyhow, there have been a lot of API changes to Ember of late. if there is
// anything that is no longer recommended, or anything just eggregiously stupid,
// please let me know before I inflict my poor designs on unsuspecting newbs.

Tunes = Ember.Application.create();

// there is not a lot of actual routing work here--just a fixed URL.
// the main value is introducing the idea of organizing the application
// into states that respond to actions. I suppose StateManager could have
// been used instead of Router but it's worth introducing connectOutlets
Tunes.Router = Em.Router.extend({
  enableLogging: true,
  root: Em.Route.extend({
    index: Em.Route.extend({
      route: '/',

      enter: function(router) {
        // in a real app the application controller would probably bootstrap
        // data on init and then call into the router on various lifecycle
        // events related to that
        $.get('https://raw.github.com/trek/ember-tunes-noodling/master/public/albums.json', function(data){
          router.get('libraryController').set('content', data);
          router.transitionTo('ready');
   ...