application.js

/* Define the namespace, models, views, and controllers */

window.App = Ember.Application.create({

    ApplicationController: Ember.Controller.extend({
        mockAjaxCall:  function(){
            // Imagine this in a $.ajax.success return call
            console.log("Mocking the AJAX GET call for playerData");
            Ember.run.later(this, function(){
                this.set('playerData',
                              {
                                  name:  "Ash",
                                  age:  12,
                                  pokemon: [
                                      {name: "Pikachu"},
                                      {name: "Psyduck"},
                                      {name: "Squirtle"},
                                  ]
                              });
                this.get('target').send('successfulDataLoad');
            }, 500);
        }
    }),
    ApplicationView: Ember.View.extend({
        templateName: 'application',
    }),

    PokemonNamesController:  Em.View.extend({
       findCharmander:  function(){
           var char    = App.Pokemon.create({ name:  'Charmander' });
           char.addToCollection();
       }
    }),
    PokemonNamesView:  Em.View.extend({
        template: Em.Handlebars.compile([
            "{{#if content}}",
                "{{#each pokemon in content}}",
                  "<li>{{pokemon.name}}</li>",
                "{{/each}}",
                "<hr>",
                '<p {{action findCharmander target="App.router.pokemonNamesController"}}>Find a Charmander!</p>',
            "{{/if}}"
        ].join('')
        )
    }),

    Pokemon:  Em.Object.extend({
      addToCollection:  function(){
        // Imagine an AJAX call here to update the collection on the
        // back end which has success call like...
        console.log("Mocking the AJAX POST to add a Pokemeon");
        Ember.run.later(this, function(){
            var router  = App.get('router');
            var content = router.get('pokemonController.content');
            content.pushObject(this);
        }, 500);
      }
    }),

    PokemonController:  Em.ArrayController.extend({
        content:  Em.A(),

        dataSourceObserver:  function(){
            var pData = App.get("router.applicationController.playerData");
            var pokemonData = pData.pokemon;
            var pokemon = pokemonData.map( function(e){
                return App.Pokemon.create(e);
            });
            this.set('content', pokemon);
        }.observes("App.router.applicationController.playerData")
    }),


    LoadingView:  Ember.View.extend({
        template:  Ember.Handlebars.compile("Loading your data")
    }),
    LoadingController:  Ember.Controller.extend(),


    LeftNavController: Ember.ObjectController.extend({}),
    LeftNavView: Ember.View.extend({
        classNames: ['left-nav'],
        templateName: 'left-nav'
    }),

});

/* Apply 'class methods'
 *
 * NOTE:  The fact that this method is called `find` is very important.  By
 * default it is used to find objects and to deserialize them.  Ember will
 * complain if this method is not available.
 *
 * */



/* At last, let's define a router */
var principalRouter = Ember.Router.create({
    enableLogging:  true,
    root: Ember.Route.extend({
        successfulDataLoad:  Em.Route.transitionTo("root.loaded"),
        index: Ember.Route.extend({
            route: '/',
            enter:  function(router){
                // Retrieve some stuff via ajax that will move
                // our state forward (via a stub)
                router.get('applicationController').
                    mockAjaxCall();
            },
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet({
                    name: 'loading',
                    outletName: 'leftNav'
                });
            },
        }),

        loaded:  Em.Route.extend({
            route: '/loaded',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet({
                    name: 'pokemonNames',
                    outletName: 'leftNav',
                    context:  App.get('router.pokemonController.content')
                });
            },

        })

    }),
});


App.initialize( principalRouter );

// vim: set ft=javascript sw=4 :