JSFiddle - React, Tailwind, and code Playground

by anshulguleria

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script type="text/x-handlebars">
    <h1>Application Template</h1>
    {{render "song" song}}
  </script>
  <!--here the two parameters are 1st: "template name" and 2nd: "context"
	view and controller instance are created automatically
-->
  
  <script type="text/x-handlebars" data-template-name="song">
    <p>{{title}}</p>
  </script>
</body>
</html>

JavaScript

App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({
  song: { name: "All You Need is Love", artist: "The Beatles" }
});

App.SongView = Ember.View.extend({
  click: function() {
    alert("You clicked on the song!");
  }
});

App.SongController = Ember.ObjectController.extend({
//content: { name: "All You Need is Love", artist: "The Beatles" },
  /*we could have set the context here also then we wont have to give the context in {{render}} helper
  */
  title: function() {
    return this.get('name') + ' – ' + this.get('artist');
  }.property('name', 'artist')
});