Ember Latest

The latest build of Ember.

by marciojunior

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>Dynamic routing</h1>
    {{#each routeObject in App.MenuController}}
        {{#linkTo routeObject.route}}{{routeObject.title}}{{/linkTo}}
    {{/each}}
    <p>
        {{outlet}}
    </p>
</script>
<script type="text/x-handlebars" data-template-name="index">
    Index
</script>

<script type="text/x-handlebars" data-template-name="student">
    <h3>Student</h3>
</script>

<script type="text/x-handlebars" data-template-name="payments">
    <h3>Payments</h3>
</script>

<script type="text/x-handlebars" data-template-name="policy">
    <h3>Policy</h3>
</script>

<script type="text/x-handlebars" data-template-name="biography">
    <h3>Biography</h3>
</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

Ember.ENV = {
    HELPER_PARAM_LOOKUPS: true
}

// application initialization

App = Ember.Application.create();
App.MenuController = Ember.ArrayController.create();

App.deferReadiness();

simulateAjax(function(data) {
    App.MenuController.set("content", data);    
    App.Router.map(function() {
        var router = this;
        data.forEach(function(item) {
           router.route(item.route); 
        });
    });
    App.advanceReadiness();
});

var data = [{"route": "student", "title": "Student Info Page"}, {"route": "payments", "title": "Payments and Pricing"}, {"route": "policy", "title": "Mine"}, {"route": "biography", "title": "About Me"}];

function simulateAjax(func) {
    setTimeout(function() {
        func(data);
    }, 300);
}