Mohu Ember Example App

by ud3323

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<!-- The root application handlebar template -->
<script type="text/x-handlebars" data-template-name="app">
    <header><h1>Ember Routing Example</h1></header>
    <!-- Nested nav view --> 
    {{view App.NavView}}
    <div id="content">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="nav">
  <nav>
  <ul>
    <li><a {{action goA}}>SectionA</a></li>
    <li><a {{action goB}}>SectionB</a></li>
  </ul>
  </nav>
</script>

<script type="text/x-handlebars" data-template-name="sectionA">
    <h2>Section A</h2>
    <p>I am section a</p>
</script>

<script type="text/x-handlebars" data-template-name="sectionB">
     <h2>Section B</h2>
    <p>I am section b</p>
    {{#each batch in controller}}
    <p>batch: <a {{action goBatch batch href=true}}>{{batch.name}}</a></p>
    {{/each}}
    <a {{action goSubA href=true}}>sub a</a>
    <a {{action goSubB href=true}}>sub b</a>
    {{outlet}}
</script>
        
<script type="text/x-handlebars" data-template-name="subB">
     <h2>Sub B</h2>
    <p>I am sub b</p>
</script>
        
<script type="text/x-handlebars" data-template-name="subA">
     <h2>Sub A</h2>
    <p>I am sub a</p>
</script>

<script type="text/x-handlebars" data-template-name="batch">
    <h2>Batch</h2>
    <p>id:{{id}} name:{{name}}</p>
    {{#each artwork in artworks}}
    <p><a {{action goArtwork artwork href=true}}>Artwork {{artwork.name}}</a></p>                    
    {{/each}}

</script>

<script type="text/x-handlebars" data-template-name="artwork">
    <h1>Artwork</h1>
    <p>id:{{id}} name:{{name}}</p>
</script>

CSS

h1 {
    font-family: Arial;                
    font-size:120%;
    margin: 10px;
}

p {
    font-family:Arial;
    font-size:90%;
}

p.clear a {
    font-size:70%;
    background:red;
    text-transform:uppercase;
    color:white;
    cursor:hand;
    cursor:pointer;
    padding:1px;
}

h2 {
   font-family:Arial;        
   margin:10px 0;
}

#summary p {
    position: absolute;
    top:91px;
    left:65px;
    font-size:70%;
    color:black;
    text-transform: uppercase;
    background:#fde900;
}

nav {
    background: #000;
}

nav ul {
    margin:0;
    padding:0;
}

nav ul li {
    margin:10px;
    display:inline-block;
    font-family: Arial;
    font-size:90%;
    cursor:hand;
    cursor:pointer;
    color:white;
}

nav ul li:hover {
    color:gray;
}
       
#content {
    margin:0 10px;
}

#todos ul li {
    margin:4px 0;
    font-family:Arial;
    font-size:80%;
    width:213px
}

#todos ul label:hover {
    background:#fde900
}

#todos ul.todo-complete li {
    text-decoration:line-through;
    color:gray;
}

input[type=text] {
    width: 200px;
    font-size: 12px;
    font-family: Arial;
    line-height: 1.4em;
    border: 0;
    outline: none;
    padding: 6px;
    border: 1px solid #999999;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}

JavaScript

App = Em.Application.create();

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    /* Reference the handlebars template by name */
    templateName: 'app'
});

/* Define a controller and view for the navigation bar */
App.NavController = Em.Controller.extend();
App.NavView = Em.View.extend({
    templateName: 'nav'
});

/* Define a controller and view for each page */
App.SectionAController = Em.Controller.extend();
App.SectionAView = Em.View.extend({
    templateName: 'sectionA'
});
App.SectionBController = Em.ArrayController.extend();
App.SectionBView = Em.View.extend({
    templateName: 'sectionB'
});
App.SubBController = Em.Controller.extend();
App.SubBView = Em.View.extend({
    templateName: 'subB'
});
App.SubAController = Em.Controller.extend();
App.SubAView = Em.View.extend({
    templateName: 'subA'
});
App.ArtworkController = Em.ObjectController.extend();
App.ArtworkView = Em.View.extend({
    templateName:"artwork"
});
App.BatchModel = Em.Object.extend({
    id:null,
    name:null
});

App.BatchController = Em.ObjectController.extend();
App.BatchView = Em.View.extend({
    templateName: "batch",
    didInsertElement: function () {
        console.log(this.get('context'));
    }
});

function createBatch (i) {
    var model = App.BatchModel.create({id:i, name:'batch'+i});
    model.artworks = [
        {id:0, name:'artwork0'},
        {id:1, name:'artwork1'},
        {id:2, name:'artwork2'}
    ];
    return model;
}

App.Batch = Em.Object.create({
    allBatches: [],
    find: function () {
        this.allBatches.clear();
        for(var i = 0; i < 10; ++i) {
            this.allBatches.pushObject(createBatch(i));
        }
        return this.allBatches;
    },
    findById: function (id) {
        return createBatch(id);
    }
});

App.Router = Em.Router.extend({
    
    root: Em.Route.extend({
        /* transitionTo switches states, triggering transition events */        
        goA:...