Ember Intro

Introduction to Ember

by juristr

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
    
    <!-- Static navbar -->
    <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>{{#link-to 'index'}}Home{{/link-to}}</li>
                    <li>{{#link-to 'about'}}About{{/link-to}}</li>
                    <li>{{#link-to 'favlinks'}}Favorite Links{{/link-to}}</li>
                    <li>{{#link-to 'favlinks.edit' 1}}Edit{{/link-to}}</li>
                    <li>{{#link-to 'favlinks' 1}}View{{/link-to}}</li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </div>
    
    {{outlet}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<div class="jumbotron">
        <h1>Ember Demo Home</h1>
        <p>
            This is my demo example to learn about Ember.js.
        </p>
        <p>
            <a href="http://juristr.com/" class="btn...

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

App = Ember.Application.create({});

App.Router.map(function(){
    this.route('about'); 
    this.resource('favlinks', { path: '/favlinks/:id' }, function(){
        this.route('edit');
    });
});

App.FavlinksEditRoute = Ember.Route.extend({
    model: function(params){
        if(params.id){
            return {
                title: 'Link ' + params.id
            };
        }else{
            return {};   
        }
    }
});

App.FavlinksIndexRoute = Ember.Route.extend({
    model: function(params){
        if(params.id){
            return {
                title: 'Link ' + params.id
            };
        }else{
            return {};   
        }
    }
});

/*
App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
          {firstName: 'Kris', lastName: 'Selden'},
          {firstName: 'Luke', lastName: 'Melia'},
          {firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ];
  }
});
*/