Skip to content

Instantly share code, notes, and snippets.

@givanse

givanse/jsbin.bemomuju.css

Created June 24, 2014 16:03
Show Gist options
  • Save givanse/f2dde9d9562356d637fa to your computer and use it in GitHub Desktop.
Save givanse/f2dde9d9562356d637fa to your computer and use it in GitHub Desktop.
Download ZIP
deeply nested {{outlet}} http://emberjs.jsbin.com/bemomuju/1/edit
Raw
jsbin.bemomuju.css
/* Put your CSS here */
html, body {
margin: 20px;
}
div.outlet {
border: 1px solid black;
border-radius: 4px;
min-height: 20px;
margin: 2px;
}
Raw
jsbin.bemomuju.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>\{{Outlet}}</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.5.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>\{{Outlet}}</h2>
Specifies a point in a parent template where the router can attach a view.
<ul>
<li>{{link-to 'Organism' 'organism'}}</li>
<ul>
<li>{{link-to 'Animal' 'animal'}}</li>
<ul>
<li>{{link-to 'Vertebrate' 'vertebrate'}}</li>
<ul>
<li>{{link-to 'Bird' 'bird'}}</li>
<ul>
<li>{{link-to 'Sparrow' 'bird.sparrow'}}</li>
</ul>
<li>{{link-to 'Mammal' 'mammal'}}</li>
<ul>
<li>{{link-to 'Dolphin' 'mammal.dolphin'}} (3 outlets)</li>
</ul>
</ul> <!-- vertebrate -->
<li>Invertebrate</li>
<ul>
<li>Arthropod</li>
<ul>
<li>Crustacean</li>
<ul>
<li>{{link-to 'Lobster' 'crustacean.lobster'}}</li>
</ul>
</ul>
</ul>
</ul>
<li>{{link-to 'Plants' 'plants'}} (3 outlets)</li>
<ul>
<li>{{link-to 'North' 'plants.north'}}</li>
<li>{{link-to 'South' 'plants.south'}}</li>
</ul>
</ul>
<div class="outlet">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h3>Index</h3>
</script>
<script type="text/x-handlebars" data-template-name="organism">
<h3>Organism</h3>
<div class="outlet">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="plants">
<h3>Plant</h3>
Default outlet.
<div class="outlet">{{outlet}}</div>
Three outlets following conventions.
<div class="outlet">{{outlet 'mosses'}}</div>
<div class="outlet">{{outlet 'grasses'}}</div>
<div class="outlet">{{outlet 'trees'}}</div>
</script>
<script type="text/x-handlebars" data-template-name="nmoss">
Mosses of the north!<br>
access its parent controller<br>
{{#each el in controllers.plants_north}}
{{el}}<br>
{{/each}}
Note that route "nmoss" doesn't exist.
</script>
<script type="text/x-handlebars" data-template-name="ngrass">
Grasses of the north!<br>
{{#each el in model}}
{{el}}<br>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="ntree">
Trees of the north!<br>
{{#each el in model}}
{{el}}<br>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="plants/south">
<h3>South</h3>
</script>
<!-- Animal -->
<script type="text/x-handlebars" data-template-name="animal">
<h3>Animal</h3>
<div class="outlet">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="vertebrate">
<h3>Vertebrate</h3>
<div class="outlet">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="bird">
<h3>Bird</h3>
<div class="outlet">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="mammal">
<h3>Mammal</h3>
<div class="outlet">{{outlet}}</div>
</script>
<script type="text/x-handlebars" data-template-name="bird/sparrow">
<h3>Sparrow</h3>
Every single route and template in the path followed to get here is rendered.
</script>
<script type="text/x-handlebars" data-template-name="mammal/dolphin">
<h3>Dolphin</h3>
The property "into" is NOT set to its default, the parent template.
<div class="outlet">{{outlet 'artic'}}</div>
<div class="outlet">{{outlet 'atlantic'}}</div>
<div class="outlet">{{outlet 'pacific'}}</div>
</script>
<script type="text/x-handlebars" data-template-name="crustacean/lobster">
<h3>Lobster</h3>
The templates for my parent routes do not exist.<br>
So, I get rendered in the last available \{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="artic">
<h3>Artic Dolphin</h3>
</script>
<script type="text/x-handlebars" data-template-name="atlantic">
<h3>Atlantic Dolphin</h3>
</script>
<script type="text/x-handlebars" data-template-name="pacific">
<h3>Pacific Dolphin</h3>
</script>
</body>
</html>
Raw
jsbin.bemomuju.js
App = Ember.Application.create();
App.Router.map(function() {
this.resource('organism', function() {
this.resource('animal', function() {
this.resource('vertebrate', function() {
this.resource('bird', function() {
this.route('sparrow');
});
this.resource('mammal', function() {
this.route('dolphin');
});
}); // vertebrate
this.resource('invertebrate', function() {
this.resource('arthropod', function() {
this.resource('crustacean', function() {
this.route('lobster');
});
});
});
}); // animal
this.resource('plants', function() {
this.route('north');
this.route('south');
});
}); // organism
});
App.MammalDolphinRoute = Ember.Route.extend({
renderTemplate: function() {
this._super(this, arguments);
this.render('artic', { outlet: 'artic',
into: 'mammal/dolphin' });
this.render('atlantic', { outlet: 'atlantic' });
this.render('pacific', { outlet: 'pacific' });
}
});
App.PlantsNorthRoute = Ember.Route.extend({
model: function() {
return ['plant 1', 'plant 2', 'plant 3'];
},
renderTemplate: function() {
this.render('nmoss', { outlet: 'mosses' });
this.render('ngrass', { outlet: 'grasses' });
this.render('ntree', { outlet: 'trees' });
}
});
App.NmossRoute = Ember.Route.extend({
model: function() {
return ['nmoss 1', 'nmoss 2', 'nmoss 3'];
}
});
App.NmossController = Ember.Controller.extend({
needs: ['plants_north'] // parent controller
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment