Iscroll and Ember pages

by amindunited

HTML

<main class="pageWrap">
    <section class="page">
        <div class="pageBody">
            
        </div>
        
    </section>
</main>
<script type="text/x-handlebars" data-template-name="application">
    <nav class="mainNav">
        {{#link-to 'index'}}Index{{/link-to}}
        {{#link-to 'category'}}Category{{/link-to}}
    </nav>
    <main class="pageWrap">
        {{outlet}}
    </main>
</script>
<script type="text/x-handlebars" data-template-name="page-layout">
    {{yield}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <div class="pageBody">
        body
    </div>
</script>
<script type="text/x-handlebars" data-template-name="category">
    <nav class="catNav">
        
    </nav>
    <div class="pageBody">
        <div class="scrollableWrap">
            <div class="loading">
                Loading....
            </div>
            <ul>
            {{#each item in view.content}}
            <li>{{item.name}}</li>
            {{/each}}
            </ul>
        </div>
    </div>
</script>



<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></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/gigafied/ember-animate/master/ember-animate.js"></script>

CSS

.mainNav {
    background-color: #dedede;
    height: 40px;
    width: 100%;
}
.pageWrap {
	display: block;
	position:absolute;
	height:auto;
	bottom:0;
	top:40px;
	left:0;
	right:0;
}
article.page {
	display: block;
	position:absolute;
	height:auto;
	bottom:0;
	top:0;
	left:0;
	right:0;
}
section .pageBody, article .pageBody { 
	background-color: rgba(127, 0, 0, .2);
	display: block;
	position:absolute;
	height:auto;
	bottom:0;
	top:0;
	left:0;
	right:0;
	margin-top:20px;
	margin-bottom:20px;
	margin-right:80px;
	margin-left:80px;
    overflow: hidden;
}
ul {list-style:none;}
ul li {
    height: 25px; 
    padding: 5px; 
    background-color: rgba(127, 0, 0, .2);
    border-bottom: solid 1px rgba(127, 0, 0, .2);
    border-top: solid 1px rgba(127, 0, 0, .5);
}

.loading{
    height: 30px;
    background-color: rgba(0, 0, 127, .2);
    width: 100%;
}

#categoryPage .pageBody {
    margin-top: 0;
    top:40px;
    overflow: hidden;
}
#categoryPage .catNav {
    height: 40px;
    width: 100%;
    background-color: rgba(0, 127, 0, .2);
}
#categoryPage.transition {
    -webkit-animation: flip 2000ms 0s 1 linear forwards;
    -moz-animation:    flip 2000ms 0s 1 linear forwards;
    -o-animation:      flip 2000ms 0s 1 linear forwards;
    animation:         flip 2000ms 0s 1 linear forwards;
}

@-webkit-keyframes flip {
  0% {
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1)
    rotateY(0deg);
  }

  5% {
    box-shadow: 0px 1.0972799999999998px 1.0972799999999998px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.000768)
    rotateY(0deg);
  }

  10% {
    box-shadow: 0px 4.112960000000001px 4.112960000000001px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.024576)
    rotateY(0deg);
  }

  15% {
    box-shadow: 0px 16.88704px 16.88704px rgba(0,0,0,0.3);
    -webkit-transform:
    scale(1.125424)
    rotateY(0.17135717260665195deg);
  }

  20% {
    box-shadow: 0px 19.90272px 19.90272px rgba(0,0,0,0.3);
    -webkit-transform:
   ...

JavaScript

App = Em.Application.create();
App.Router.map(function(){
    this.resource('category', '/category', function(){
    
    });
});

App.PageView = Em.View.extend({
    tagName: ['article'],
    classNames: ['page'],
    layoutName: 'page-layout'
});

App.IndexView = App.PageView.extend({
    didInsertElement: function(){
        
    }
});

App.CategoryView = App.PageView.extend({
    elementId: 'categoryPage',
    classNameBindings: ['transition:transition'], 
    content: [
        {name:"0"},
        {name:"1"},
        {name:"2"},
        {name:"3"},
        {name:"4"},
        {name:"5"},
        {name:"6"},
        {name:"7"},
        {name:"8"},
        {name:"9"},
        {name:"10"},
        {name:"11"}
    ],
    didInsertElement: function(){
        var self = this;
        var loading = false;
        var pgb = self.$('.pageBody').first()[0];
        var pg = new IScroll(pgb, {
            mouseWheel:true,
            scrollbars: true
        });
        pg.on('scrollEnd', function(){
            console.log("where we at? ", this.y);
            if (this.y === 0 && !loading) {
                loading = true;
                window.setTimeout(function(){
                    pg.scrollTo(0, '-30', 1000, IScroll.utils.ease.bounce);
                    loading = false;
                }, 2000);
            }
        });
    },
    animateIn: function(done){
        
        this.set('transition', true);
        var self = this;
        console.log(self.$()[0]);
        PrefixedEvent(self.$()[0], 'AnimationEnd', function(e){
			self.set('transition', false);
            done.call(self);
		});
        
    },
    
    animateOut: function(done){
        this.set('transition', true);
        
        var self = this;
        Em.run.scheduleOnce('afterRender', this, function(){
            PrefixedEvent(self.$()[0], 'AnimationEnd', function(e){
                console.log("Exit animation end");
                self.set('transition', false);
               ...