Hello, Ember.js!

This is a sample app built with Ember.js and its goal is to show how to write some of the common application features using Ember and some of its eco-system libraries.

by schawaska

HTML

<body>    
    
    <script type="text/x-handlebars" data-template-name="app-view">
        {{view App.NavigationView controllerBinding="controller.controllers.navigationController"}}
        <header style="margin-top: 5px;" class="jumbotron subhead" id="overview">
            <div class="container">
                <br />&nbsp;
            </div>
        </header>
        <div class="container">
            {{outlet}}
        </div>
    </script>

    <script type="text/x-handlebars" data-template-name="top-nav-bar">   
        <div class="navbar navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <a class="brand" href="#">Testing App</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
                {{#each item in controller}}
                    {{#view view.NavigationItemView menuBinding="item.routeName"}}
                    <a {{action navigateTo item}} >{{item.displayText}}</a>
                    {{/view}}   
                {{/each}}
            </ul>
          </div>
        </div>
      </div>
        </div>
    </script>
    
    <script type="text/x-handlebars" data-template-name="home-view">
        <h1>Hello, Ember.js!</h1>
        <p>
            Hi! This is a sample app built with <a href="http://emberjs.com/" target="_blank">Ember.js</a> and its goal is to show how to write some of the common application features using Ember and some of its eco-system libraries, such as:
            <ul>
                <li><a href="http://jquery.com/" target="_blank">jQuery.js</a> (Dependency)</li>
                <li><a href="http://handlebarsjs.com/" target="_blank">Handlebars.js</a> (Dependency, Ember default...

CSS

/*!
 * metro-bootstrap v1.0.3
 *
 * from talkslab based on twitter bootstrap.
*/article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}a:hover,a:active{outline:0}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{max-width:100%;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}#map_canvas img{max-width:none}button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button,input{*overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{margin:0;font-family:"Segoe UI","Segoe WP","Helvetica...

JavaScript

App = null;

var BaseController = null;
var BaseArrayController = null;
var BaseView = null;
var FadeInView = null;

var initialize = function() {
    BaseController = Em.Controller.extend();
    BaseView = Em.View.extend();
    FadeInView = BaseView.extend({
        didInsertElement: function() {
            this.$().hide().fadeIn('slow');
        }
    });
    BaseArrayController = Em.ArrayController.extend();
};


$(function() {

    initialize();
    
    App = Em.Application.create();
    
    App.ApplicationController = BaseController.extend();
    
    App.NavBarItem = Em.Object.extend({
        displayText: '',
        routePath: '',
        routeName: '',
        url: '#'
    });

    App.NavigationController = BaseArrayController.extend({
        content: [],
        selected: null,
        init: function() {
            
            this._super();
            this.pushObject(
                App.NavBarItem.create({
                    displayText: 'Home',
                    routeName: 'home',
                    routePath: 'root.index.home'
                })
            );
            this.pushObject(
                App.NavBarItem.create({
                    displayText: 'Links/Resources',
                    routeName: 'resources',
                    routePath: 'root.index.resources'
                })
            );
            this.pushObject(
                App.NavBarItem.create({
                    displayText: 'Ember Tutorials',
                    routeName: 'tutorials',
                    routePath: 'root.index.tutorials'
                })
            );
            this.pushObject(
                App.NavBarItem.create({
                    displayText: 'Contact',
                    routeName: 'contact',
                    routePath: 'root.index.contact'
                })
            );
        }        
    });
    
    App.HomeController = BaseArrayController.extend({
    
    });
    
    
    App.Resource = Em.Object.extend({
 ...