Created
May 13, 2014 11:02
-
-
Save givanse/934088292da4eca8d11b to your computer and use it in GitHub Desktop.
Nested resources showing the 'render out of order' bug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Nested resources showing the 'render out of order' bug" /> | |
| <meta charset="utf-8"> | |
| <title>render out of order bug</title> | |
| </head> | |
| <body> | |
| <script type="text/x-handlebars"> | |
| {{#link-to 'index'}}index{{/link-to}} | |
| {{#link-to 'products'}}products{{/link-to}} | |
| <br> | |
| path: {{currentPath}} | |
| <br> | |
| {{! new templates will render here: }} | |
| {{outlet}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="index"> | |
| <h2>Index</h2> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="products"> | |
| <h2>Products</h2> | |
| {{#each controller}} | |
| {{#linkTo 'product' this}} | |
| {{ title }} | |
| {{/linkTo}}<br> | |
| {{/each}} | |
| {{! Render nested resources, if any. | |
| Just as defined in the router. | |
| This is the Ember way. }} | |
| {{outlet}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="product"> | |
| <h2>Product:</h2> | |
| <h3>{{ title }}</h3> | |
| </script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script> | |
| <script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // More info: | |
| // http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting | |
| App = Ember.Application.create({ }); | |
| App.Router.map(function() { | |
| // Routes are tied/constrained to: | |
| // - URl construction and interpretation, and | |
| // - how templates will render | |
| // Routes != URLs | |
| // this resources will get an auto-generated | |
| // index route i.e. App.ProductsIndexRoute | |
| this.resource('products', function () { | |
| this.resource('product', {'path' : '/:product_id' }); | |
| }); | |
| }); | |
| // Routes | |
| App.ProductsRoute = Ember.Route.extend({ | |
| model: function() { | |
| return products; | |
| }, | |
| // fixes: "render out of order" bug | |
| renderTemplate: function() { | |
| this.render('products', {into: 'application' }); | |
| } | |
| }); | |
| // fixes: "render out of order" bug | |
| App.ProductsIndexRoute = App.ProductsRoute; | |
| App.ProductRoute = Ember.Route.extend({ | |
| renderTemplate: function() { | |
| // This will work even with the {{outlet}} | |
| // defined in the parent Route/Template. | |
| // This is not the Ember way, it causes a "bug". | |
| // Clicking on the link 'products' shows | |
| // an empty template. It is a parent template | |
| // and it was asumed to have been | |
| // rendered already. | |
| // We'll call it the "render out of order" bug | |
| // because, by convention, nested resources | |
| // are always rendered after their parents. | |
| this.render('product', {into: 'application'}); | |
| } | |
| }); | |
| // Fixture data | |
| var products = [ | |
| {id: 1, title: 'Brave new world'}, | |
| {id: 2, title: 'The catcher in the rye'} | |
| ]; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment