CodePen

HTML

            
              <script type="text/x-handlebars" data-template-name="application">
  <h1>A test</h1>
  {{view App.CurrentUserView}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="main">
  <h1>Welcome!</h1>
</script>


<script type="text/x-handlebars" data-template-name="home">
  {{#linkTo posts.index}}See posts{{/linkTo}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="current-user">
  {{#if view.isLoggedIn}}
    {{view.username}}
    <a href="#" {{action logout}}>logout</a>
  {{else}}
    {{#linkTo login}}Login{{/linkTo}}
  {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="posts">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="posts/index">
  <p>view: posts/index</p>
  {{#linkTo comments.index}}See comments{{/linkTo}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="post">
  <p>view: post</p>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="comments/index">
  <p>view: comments</p>
  {{#linkTo comments.show}}See comments{{/linkTo}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="comments/show">
  <p>view: comments.show</p>
</script>

<script type="text/x-handlebars" data-template-name="login">
  <form {{action login content}}>
  <label>
    <p>Username:</p>
    {{view Ember.TextField valueBinding="content.username" placeholder="blah@diddy.com"}}
  </label>
  <label>
    <p>Password:</p>
    {{view Ember.TextField valueBinding="content.password" placeholder="blah"}}
  </label>
  <p>
    <button>Login</button>
    {{#linkTo main}}cancel{{/linkTo}}
  </p>
  </form>
</script>
            
          
!
via HTML Inspector

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              App = Ember.Application.create();

// Create routes
App.Router.map(function(){
  this.route("home", { path: "/home" });
  this.route("main", { path: "/" });
  this.route("login");
  
  // A resource is a grouping of routes
  //  - This will create routes posts.index and posts
  this.resource("posts", function(){
    this.resource("post", { path: "/1" }, function(){
      this.resource("comments", function(){
        this.route("show");
      });
    });
  });
});


// A very basic user object we can bind to
//   in the view
App.User = Ember.Object.extend({
  username: null,
  isLoggedIn: false
});

// This route does the actual authentication logic
//  and redirects to the "secure" home route
//  this is called from the LoginController
App.LoginRoute = Ember.Route.extend({
  model: function(){
    return new App.User;
  },
  events: {
    login: function(user){
      if(user.password == "blah"){
        var controller = this.controllerFor("application");
        controller.set("currentUser", user);
        user.set("isLoggedIn", true);
        this.transitionTo("home");
      }
    }
  }
});

// ApplicationRoute allows for a logout action to
//  exist on any view in the app
//  also holds the global currentUser object
//  - Should logout be a route instead of an action?
App.ApplicationRoute = Ember.Route.extend({
  setupController: function(controller){
    var user = controller.get("currentUser") || App.User.create();
    controller.set("currentUser", user);
  },
  events: {
    logout: function(){
      var controller = this.controllerFor("application");
      var user = controller.get("currentUser");
      user.set("isLoggedIn", false);
      this.transitionTo("main");
    }
  }
});

// CurrentUserView allows us to bind to "isLoggedIn" in
//  the current user view. That way anytime we change it,
//  it automatically toggles the login/logout display
App.CurrentUserView = Ember.View.extend({
  templateName: "current-user",
  isLoggedIn: function(){
    return this.get("controller.currentUser.isLoggedIn") == true;
  }.property("controller.currentUser.isLoggedIn"),
  username: function(){
    return this.get("controller.currentUser.username");
  }.property("controller.currentUser.username")
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................