eccegordo/jsbin.epihat.html

## jsbin.epihat.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta name="description" content="Minimalist Ember JSBin" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src=" http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
 <title>Ember JS Example</title>
</head>
<body>

  <script type="text/x-handlebars">
    <div class="container">
      <h1>Ember JS Example</h1>
      <ul>
        <li>{{#linkTo 'welcome'}}View Welcome Page{{/linkTo}}</li>
        <li>{{#linkTo 'other'}}View Other Page{{/linkTo}}</li>
      </ul>
      <hr />
      {{outlet}}
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="welcome">
      <h2>Welcome Page</h2>
      <a href="#" class="btn btn-primary" {{action doit}}>Do Something</a>
      {{ outlet }}
  </script>

  <script type="text/x-handlebars" data-template-name="other">
      <h2>Other Page</h2>
      {{ outlet }}
  </script>


</body>
</html>

## jsbin.epihat.js
App = Ember.Application.create();

App.Store = DS.Store.extend({
  adapter: 'DS.FixtureAdapter'
});

// Router
App.Router.map(function() {
  this.resource('welcome', { path: '/' }); // Welcome route
  this.resource('other', { path: 'other' }); // Other route
});

App.ApplicationRoute = Ember.Route.extend({
  events: {
    doit: function() {
     App.doSomething();
    }
  }
});

// Generic function to try stuff

App.doSomething = function(){
  alert("try it...");
};
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
	<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
	<meta name="description" content="Minimalist Ember JSBin" />
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
	<script src="http://builds.emberjs.com/ember-latest.js"></script>
	<script src=" http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
	<title>Ember JS Example</title>
	</head>
	<body>

	<script type="text/x-handlebars">
	<div class="container">
	<h1>Ember JS Example</h1>
	<ul>
	<li>{{#linkTo 'welcome'}}View Welcome Page{{/linkTo}}</li>
	<li>{{#linkTo 'other'}}View Other Page{{/linkTo}}</li>
	</ul>
	<hr />
	{{outlet}}
	</div>
	</script>

	<script type="text/x-handlebars" data-template-name="welcome">
	<h2>Welcome Page</h2>
	<a href="#" class="btn btn-primary" {{action doit}}>Do Something</a>
	{{ outlet }}
	</script>

	<script type="text/x-handlebars" data-template-name="other">
	<h2>Other Page</h2>
	{{ outlet }}
	</script>


	</body>
	</html>
	App = Ember.Application.create();

	App.Store = DS.Store.extend({
	adapter: 'DS.FixtureAdapter'
	});

	// Router
	App.Router.map(function() {
	this.resource('welcome', { path: '/' }); // Welcome route
	this.resource('other', { path: 'other' }); // Other route
	});

	App.ApplicationRoute = Ember.Route.extend({
	events: {
	doit: function() {
	App.doSomething();
	}
	}
	});

	// Generic function to try stuff

	App.doSomething = function(){
	alert("try it...");
	};