NavRouting and stateManagment

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{render wines}}
</script>
<script type="text/x-handlebars" data-template-name="wines">
    <span>Wines</span>
    {{#each wine in controller.content}}
        {{#with wine}}
            <li>{{wine.name}}</li>
        {{/with}}
    {{/each}}
</script>

JavaScript

window.App = Em.Application.create();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();

getWinesContent = function(){ 
        return t = setTimeout(function(){
            console.log("returning");
           App.Wines.set('content',  [{name:"Pinot Noir"}, {name:"Syrah"}, {name:"Chablis"}, {name:"Cabernet Sauvignon"}, {name:"Merlot"}, {name:"SĂ©millon"}]);
        }, 200);
}

App.Wines = Em.Object.create();
App.WinesController = Em.Controller.extend({
    contentBinding:'App.Wines.content',
    contentListener: function(){
        console.log("content updated ", this.get('content'));
    }.observes('this.content')
});
App.WinesView = Em.View.extend({
    tagName: ['ul'],
    classNames: ['winesList'],
    contentListener: function(){
        console.log("from the view contentListener ", this.controller.content, this.$());
    }.observes('this.controller.content.length')
});

App.Router.map(function(){
    this.route("index", {path:"/"});
    this.resource('index', {path:"/"}, function(){
        console.log("first resource");
    })
});

App.IndexRoute = Em.Route.extend({
    renderTemplate:function(){
        console.log('index Route');
        getWinesContent();
    }
});