Ember Latest
The latest build of Ember.
HTML
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
<h1>Application</h1>
{{containerOutlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Content</h2>
{{#linkTo "panel" nextPanelId}}Open first panel: {{nextPanelId}}{{/linkTo}}
<hr />
</script>
<script type="text/x-handlebars" data-template-name="panel">
<h2>Panel {{id}}</h2>
{{#linkTo "panel" nextPanelId}}Open panel: {{nextPanelId}}{{/linkTo}}
<hr />
</script>
CSS
h1 {
font-size: 1.6em;
padding-bottom: 10px;
}
h2 {
font-size: 1.4em;
}
ul {
padding: 15px;
font-size: 1.4em;
color: green;
}
JavaScript
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
App = Ember.Application.create({});
App.Router.map(function () {
this.route("panel", {
path: "/:panel_id"
});
});
App.IndexRoute = Ember.Route.extend({
model: function () {
random = getRandomInt(1, 10);
return { nextPanelId: random };
}
});
App.PanelRoute = Ember.Route.extend({
model: function (params) {
random = getRandomInt(1, 10);
return {
id: params.panel_id,
nextPanelId: random
};
}
});
Ember.Handlebars.registerHelper('containerOutlet', function (property, options) {
var outletSource;
if (property && property.data && property.data.isRenderData) {
options = property;
property = 'main';
}
outletSource = options.data.view;
while (!(outletSource.get('template.isTop'))) {
outletSource = outletSource.get('_parentView');
}
options.data.view.set('outletSource', outletSource);
options.hash.currentViewBinding = '_view.outletSource._outlets.' + property;
//Only this line has been changed
return Ember.Handlebars.helpers.view.call(this, Ember.ContainerOutletView, options);
});
Ember.ContainerOutletView = Ember.ContainerView.extend({
//For some reason it breaks when I remove this observer
_currentViewWillChange: Ember.beforeObserver(function () {}, 'currentView'),
_currentViewDidChange: Ember.observer(function () {
this.pushObject(this.get('currentView'));
}, 'currentView')
});