Ember collection view pages

by amindunited

HTML

<script type="text/x-handlebars" data-template-name="application">
    {{lux-but cliky=controller.blap}}
    <h1>Application</h1>
    <nav>
        <button {{action 'logEmber'}}>Log</button>
        {{#link-to 'category'}}
        <button>Category</button>
        {{/link-to}}
    </nav>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="components/lux-but">
    <button {{action 'butt'}}>Butt</button>
</script>

<script type="text/x-handlebars" data-template-name="category">
    Category
    
    <nav>
        {{#link-to 'subcategory'}}
        <button>SubCategory</button>
        {{/link-to}}
    </nav>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="subcategory">
    subcategory
     <nav>
        {{#link-to 'event'}}
        <button>Event</button>
        {{/link-to}}
    </nav>
    <div class="subcategory_page_wrap">
        <nav>SubCat Page Nav</nav>
        <div class="pages">
            {{outlet}}
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="category/subcategory/event">
    event
    {{outlet}}
</script>


<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.js"></script>
<script src="https://rawgithub.com/ebryn/ember-model/master/ember-model.js"></script>
<script src="https://rawgithub.com/gigafied/ember-animate/master/ember-animate.js"></script>

CSS

body {
    counter-reset: pages;
}

.page {
    position: absolute;
    top: 50px;
    left: 0%;
    width: 100%;
    height: 100%;
    counter-increment: pages;
    
}

.subcategory_page_wrap {
    position: absolute;
    width: 33%;
    border: solid 1px green;
    height: 100%;
    left: 33%;
    //overflow-x: scroll;
}
.pages {
    position: absolute;
    top: 20px;
    left: -50%;
    min-width: 100%;
    height:100%;
    overflow-x: scroll;
}
.subpage {
    width: 100%;
    background-color: rgba(127, 127, 127, 0.5);    
    position: absolute;
    border: solid 1px pink;
    left: 0%;
    top: 0%;
}
.subpage:nth-child(2) {left: 100%;}
.subpage:nth-child(3) {left: 200%;}
.subpage:nth-child(4) {left: 300%;}

JavaScript

App = window.App = Em.Application.create({
    
});

App.ApplicationRoute = Em.Route.extend({
    actions: {
        stink: function(){
            alert('Gross!!!!')
        }
    }
});

App.IndexRoute = Em.Route.extend({
    actions: {
        /*
        stink: function(){
            alert('Index Gross!!!!')
        }
        */
    }
});





App.ApplicationController = Em.Controller.extend({
    blap: 'stink',
    actions: {
        logEmber: function(){
            console.log(Em);
        },
        stink: function(){
            alert('ewwwwwww');
        }
    }
});


App.Router.map(function(){
    this.resource('category', {path: '/category'}, function(){
        this.resource('subcategory', {path: '/subcategory'}, function(){
            this.resource('event', {path: '/event'}, function(){
                
            });
        });
    });
});

App.SubcategoryView = Em.View.extend({ 
    didInsertElement: function(){
        console.log("........");
    }
});
App.EventRoute = Em.Route.extend({
    model: function(){
        return [{name:'a'}, {name:'b'}, {name:'c'}];
    }
});
App.EventController = Em.Controller.extend({
    foo: 'bar'
});
App.EventView = Em.CollectionView.extend({
    itemViewClass: Em.View.extend({
        classNames: ['subpage'],
        template: Em.Handlebars.compile('Item {{view.name}}')
    }),
    //content: [{name:'a'}, {name:'b'}, {name:'c'}],
    contentBinding: 'controller.content',
    didInsertElement: function() {
        console.log("Event View", this.get('controller.foo'));
    }
    
});


App.LuxButComponent = Em.Component.extend({
    actions: {
        butt: function(){
            console.log("little butt");
            this.sendAction('cliky');
        }
    }
});