Minimalistic starting point for Ember.js

by phsiao2000

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
<script type="text/x-handlebars" data-template-name="app" >
    <div id="appName">{{name}}</div>
</script>
<script type="text/x-handlebars" data-template-name="hello" >
    <div>What is <b>{{name}}?</b></div>
</script>
 <script type="text/x-handlebars" data-template-name="goodbye" >
    <div>Goodbye to <b>{{name}}?</b></div>
</script>

<h1 id="header">
    <p>The App is called: </p>
</h1>
<div id="section1">
    <h2>Start Here</h2>
</div>
<div id="section2">
    <h2>Last Section</h2>
</div>

CSS

div {background: rgb(240,240,240);
     padding:0px 5px 0px 5px;
     margin:5px 0px 5px 0px;
}
strong {
    font-size: 24px;
    font-weight: normal;
    color: red;
}
b {
    font: italic bold 16px Georgia;
    color: green;
}
h2 {color: red;}

h1 p {
    color: blue;
    font: bold 20px Helvetica;
}

div#appName{
    color: orange;
    font: bold 20px Helvetica;
}

JavaScript

// Please change the info and fork this example
App = Ember.Application.create({
    name: "My Ember.js App"});

Thing = Ember.Object.extend({
    name:"The Monolith",
    movie: "2001: A Space Odyssey"    
});
var xxx = Thing.create();
App.xxx = xxx;
App.userController = Ember.Object.create({
    content: xxx
});

var view = Ember.View.create({
    templateName: "app",
    nameBinding: "App.name"
});
view.appendTo("#header");

var view = Ember.View.create({
    templateName: "hello",
    nameBinding: "App.userController.content.name"
});
view.appendTo("#section1");


var view = Ember.View.create({
    templateName: "goodbye",
    nameBinding: "App.userController.content.name"
});
view.appendTo("#section1");

App.name="zzzzzz";
alert(App.name);