Ember Meganav Notes 1

by amindunited

HTML

<script src="http://amindunited.com/lib/js/int/ember.1.pre.jquery.1.8.fix.js"></script>
<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-1.0.pre.js"></script>
<script type="text/x-handlebars" data-template-name="MegaNavApp">
    <p>The Line is: <br/>{{tagline}}</p>
    
    {{outlet nav}}
    {{outlet subnav}}
</script>
<script type="text/x-handlebars" data-template-name="categories">
    <h1>Categories go here</h1>
    {{#each category in controller}}
            <a {{action showCategory category  }}> {{category.title.$t}} </a>
    {{/each}}
</script>
<script type="text/x-handlebars" data-template-name="category">
    <h1>I'm a category</h1>
</script>
<script type="text/x-handlebars" data-template-name="images">
    <div class="images">
    {{#each image in controller}}
        {{#with image}}
            <img {{bindAttr src="url"}}></img>
        {{/with}}
    {{/each}}
    </div>
</script>

CSS

.images img {
    width:100px;
}

JavaScript

window.MegaNavApp = Em.Application.create({
    
    ApplicationView: Ember.View.extend({
        templateName : 'MegaNavApp',
        classNames: ['MegaNavApp-view']
    }),
    ApplicationController : Ember.Controller.extend({
        tagline: "A Tag Line could be used here"
    }),
    
    //
    CategoriesView: Em.View.extend({
        templateName: 'categories',
        didInsertElement:function(){
            console.log("insertyed");
            console.log(this.$());
            this.$().css({'border':'solid 1px #999999'})
        }
    }),
    CategoriesController: Em.ArrayController.extend(),

    CategoryView : Em.View.extend({
        templateName: 'category'
    }),
    CategoryController: Em.ObjectController.extend(),
    
    ImagesView : Em.View.extend({
        templateName: 'images'
    }),
    ImagesController: Em.ArrayController.extend(),
    
    Router: Ember.Router.extend({
        enableLogging: true,
        //showCategory: Ember.Route.transitionTo('listCat'),
        whatImage : Ember.Route.transitionTo('whatImage'),
        root: Em.Route.extend({
            index: Ember.Route.extend({
                route: '/',
                enter: function( router ){
                    console.log("Root.Index");
                },
                connectOutlets: function(router, context){
                    //router.get('applicationController').connectOutlet('categories', 'categories')
                    router.get('applicationController').connectOutlet('nav', 'categories', MegaNavApp.Category.all());
                },
                showCategory : function( router, context ){
                    router.transitionTo('listCat', context)
                }
            }),
            categories : Em.Route.extend({
                route: '/categories',
                index:  Ember.Route.extend({
                    route: '/categories',
                    enter: function( router ){
                        console.log("entered categories");
   ...