Ember latest Template

by mgrassotti

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Routing Test</h1>
    <p>Demo of promise routing.</p>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="yapps">
    <h2>Yapps:</h2>
    <ul>
    {{#each this}}
        <li>{{title}} <button {{action show this}}>Show</button></li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="yapp">
    <button {{action back}}>Back To Home</button>
    <h2>Yapp: {{title}}</h2>
    <h3>Pages:</h3>
    <ul>
    {{#each pages}}
        <li>{{title}} <button {{action show this}}>Show</button></li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="page">
    <button {{action back}}>Back To Yapp</button>
    {{#if hasNext}}
        <button {{action next}}>Next Page</button>
    {{/if}}
    <h2>Page: {{title}}</h2>
    <h3>Subpages:</h3>
    <ul>
    {{#each subpages}}
        <li>{{title}} <button {{action show this}}>Show</button></li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="subpage">
    <button {{action back}}>Back To Page</button>
    <h2>Subpage: {{title}}</h2>
</script>

JavaScript

var USE_PROMISE = true;

function promise(model) {
    if (!model.then && USE_PROMISE) {
        var deferred = $.Deferred();
        setTimeout(function() {
            deferred.resolve(model);
        }, 100);
        return deferred.promise(model);
    } else {
        return model;
    }
}

function decorate(objClass, methodName, func) {
    var proto = objClass.proto();
    var superFunc = proto[methodName];
    proto[methodName] = function () {
        var ret, sup = this._super;
        this._super = superFunc;
        ret = func.apply(this, arguments);
        this._super = sup;
        return ret;
    };
}

decorate(Ember.Route, 'stashContext', function (manager, context) {
    console.log(this.get('path'), 'stashContext', context);
    this._super.apply(this, arguments);
});

decorate(Ember.Route, 'routePath', function (manager, path) {
    console.log(this.get('path'), 'routePath', path);
    this._super.apply(this, arguments);
});

decorate(Ember.Router, 'transitionTo', function (path, context) {
    console.log('transitionTo', path, context);
    this._super.apply(this, arguments);
});

App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend();
App.YappsController = Em.ArrayController.extend();
App.YappController = Em.ObjectController.extend();
App.PageController = Em.ObjectController.extend({
    yappController: null,
    hasNext: function() {
        return this.get('yappController.pages.length') > 1;
    }.property('yappController.pages.length'),
    next: function() {
        var pages = this.get('yappController.pages'),
            page = this.get('content'),
            index = pages.indexOf(page);
        if (index === -1) {
            return null;
        }
        if (index === pages.length - 1) {
            return pages[0];
        }
        return pages[index + 1];
    }.property('yappController.pages.[]', 'content')
});
App.SubpageController = Em.ObjectController.extend();
App.registerInjection({
    name:...