Ember.js Base fiddle

by Sylvain MINA

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name='app'>
    <ul id='sort-target'>
        {{#each content}}
        <li>{{title}}</li>
        {{/each}}                
    </ul>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="other">
Current User: {{current_user.first_name}}   

    <button {{action showCat}}>Go to cat view!</button>   <button {{action doSomething target="view"}}> Do something first, then go to cat view</button>    
</script>

<script type="text/x-handlebars" data-template-name="cat">
    I am the cat view! <button {{action showMain}}>Back</button>      
</script>

JavaScript

App = Ember.Application.create({
    User: Ember.Object.extend({
        first_name: null,
        last_name: null,
        id: null
    }),

    ApplicationController: Ember.Controller.extend({
        init: function() {
            this._super();
            this.set('current_user', App.User.create({
                first_name: 'Milo',
                last_name: 'Otis',
                id: 7
            }))
        },

        current_user: false
    }),
    ApplicationView: Ember.View.extend({
        templateName: 'app',

    }),

    OtherController: Ember.Controller.extend({
        current_user: function() {
            return App.router.getPath('applicationController.current_user');
        }.property('applicationController.current_user')
    }),

    OtherView: Ember.View.extend({
        templateName: 'other',
        doSomething: function(event) {
            console.log("I did something first");
            /*XXX: HOW DO I DO THIS? */
            this.get('controller.target').showCat();
        }
    }),

    CatController: Ember.Controller.extend({}),
    CatView: Ember.View.extend({
        templateName: 'cat'
    }),

    Router: Ember.Router.extend({
        location: Ember.Location.create({
            implementation: 'hash'
        }),
        showCat: function(event) {
                this.transitionTo('cat', event.context);
        },
        
        root: Ember.Route.extend({
            showMain: function(router, event) {
                router.transitionTo('main', event.context);
            },
            main: Ember.Route.extend({
                route: '/',
                connectOutlets: function(router, event) {
                    router.get('applicationController').connectOutlet('other');
                }
            }),
            cat: Ember.Route.extend({
                route: '/cat',
                connectOutlets: function(router, event) {
                    router.get('applicationController').connectOutlet('cat');
         ...