Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://s3.amazonaws.com/machty/to_s3_uploads/ember-c8c4084b-8bd2-27fa-baca-5770dbd3f4c3.js"></script>
</head>
<body>
  
  <p><a href="https://github.com/emberjs/ember.js/pull/3655">Relevant PR</a></p>
  
  <script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{outlet}}
    
    <p>
      {{link-to 'Articles' 'articles'}}
      {{link-to 'Cause a failing transition' 'boom'}}
    </p>
  </script>
  
  <script type="text/x-handlebars" data-template-name="index">
    <h2>Index</h2>
    
  </script>
  
  <script type="text/x-handlebars" data-template-name="articles">
    <h2>Articles</h2>
    <ul>
    {{#each}}
      <li>{{title}}</li>
    {{/each}}
    </ul>
  </script>
  
  
  <script type="text/x-handlebars" data-template-name="application_error">
    <h2>Top level application_error: {{msg}}</h2>
    <p>
      I get entered when route model promises reject,
      `error` action bubbles to root, and no other 
      leafier substates can be found. Unlike "error",
      I'll get entered if ApplicationRoute returns
      a rejecting promise.
    </p>
    <p>
      Notice how we're not rendered inside the application
      template's outlet but as a top level view.
    </p>
    {{link-to 'Try Again' 'index'}}
  </script>
  
    
  <script type="text/x-handlebars" data-template-name="application_loading">
    <h2>Top level application_loading</h2>
  </script>
  
  <script type="text/x-handlebars" data-template-name="loading">
    <h2>Loading...</h2>
    <p>
      You'll see this when trying to enter ArticlesRoute,
      because a more specific 'articles_loading' substate
      wasn't found, whereas navigating to 'boom' will
      cause 'boom_loading' substate to be entered instead 
      of this one, since a template has been defined for it.
    </p>
  </script>
  
  
  
  
  <script type="text/x-handlebars" data-template-name="boom_loading">
    <h2>I see that you are trying to enter BoomRoute</h2>
    <p>
      lemme know how that works out for you
    </p>
  </script>
    
  
  
  
  
  <script type="text/x-handlebars" data-template-name="error">
    <h2>Error</h2>
    <p>
      I'm rendered into 'application' template's outlet.
      If you deleted this template (or changed its name to
      something else), the "application_error" substate would 
      be entered, and "ApplicationView" would be torn down
    </p>
    
    {{link-to 'Back to Index' 'index'}}
  </script>
</body>
</html>
 
App = Ember.Application.create();
​
App.Router.map(function() {
  this.route('boom');
  this.route('articles');
});
​
var rejectPromise = true;
App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    if (rejectPromise) {
      rejectPromise = false;
      return new Ember.RSVP.Promise(function(resolve, reject) {
        Ember.run.later(reject, { 
          msg: "ApplicationRoute#model returned rejecting promise" 
        }, 1000);
      });
    }
  }
});
​
​
​
​
​
App.BoomRoute = Ember.Route.extend({
  model: function() {
    return new Ember.RSVP.Promise(function(resolve, reject) {
      Ember.run.later(reject, { 
        msg: "BOOM" 
      }, 2000);
    });
  }
});
​
​
App.ArticlesRoute = Ember.Route.extend({
  model: function() {
    return new Ember.RSVP.Promise(function(resolve) {
      Ember.run.later(resolve, [
        { title: "i am a title" },
        { title: "i am a title2" }
      ], 2000);
    });
  }
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
machtypro
0viewers