Ember data Horror

by amindunited

HTML

<h2>
    References:
</h2>
<ul>
    <li>
    http://demo.marcofolio.net/3d_animation_css3/
    </li>
    <li>
        https://github.com/eviltrout/ember-cloaking
    </li>
</ul>

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Top</h1>
    <nav>
        {{#link-to 'video'}}Video{{/link-to}}
        {{!--#link-to 'audio'}}Audio{{/link-to--}}
        {{!--#link-to 'books'}}Books{{/link-to--}}
        {{!--#link-to 'images'}}Images{{/link-to--}}
    </nav>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="video">
    <nav>
        {{#link-to 'movie'}}Movies{{/link-to}}
    </nav>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="poster">
    Movie Poster for {{title}}
</script>

<script type="text/x-handlebars" data-template-name="movie">
    <div class="movieList">
    {{cloaked-collection cloakView="poster" content=content.content tagName="ul"}}
    </div>
</script>
<!-- 
JS LIBS
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.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.6.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
<script src="https://rawgithub.com/eviltrout/ember-cloaking/master/ember-cloaking.js"></script>

CSS

* { -webkit-overflow-scrolling: touch; }
ul { list-style: none; }
ul li { margin:0; padding: 0; }
ul li.poster-cloak { height: 200px; width: 160px; display: inline-block; vertical-align: top; margin-top:25px; margin-bottom:25px;}
ul li.poster-cloak .poster { height: 200px; width: 160px;}
ul.movieList {
    border:10px solid #fcfafa; 
    -webkit-transform: rotateX(30deg);
	-moz-box-shadow:0 3px 10px #888; 
    -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; 
    -webkit-transition-duration: 0.5s; 
}
ul li.poster-cloak {	
    -webkit-perspective: 500; 
    -webkit-transform-style: preserve-3d;
	-webkit-transition-property: perspective; 
    -webkit-transition-duration: 0.5s;
}
ul li.poster-cloak .poster {
    border:10px solid #fcfafa; 
    -webkit-transform: rotateY(30deg);
	-moz-box-shadow:0 3px 10px #888; 
    -webkit-box-shadow:0 3px 10px #888;
	-webkit-transition-property: transform; 
    -webkit-transition-duration: 0.5s; 
}

JavaScript

App = Em.Application.create();
App.ApplicationAdapter = DS.ActiveModelAdapter.extend();
/*
App.MovieSerializer = DS.ActiveModelSerializer.extend({
    primaryKey: 'movieid'
});
*/
App.Movie = DS.Model.extend({
    /*film: DS.belongsTo('film'),*/
    genre: DS.attr(),
    imdbnumber: DS.attr(),
    label: DS.attr(),
    movieid: DS.attr(),
    tagline: DS.attr(),
    title: DS.attr(),
    year: DS.attr()
});

App.PosterView = Em.View.extend({
    templateName: 'poster',
    classNames: ['poster']
});

App.Router.map(function(){
    this.resource('video', {path:'/video'}, function(){
        this.resource('movie', {path:'/movie'}, function(){});
    });
});

App.MovieRoute = Em.Route.extend({
    model: function() {
        var movies = this.store.find('movie');
        console.log('movies ', movies);
        return movies;
    }
});

App.MovieView = Em.View.extend({
    didInsertElement: function(){
        console.log('movie view ', this.get('controller.content'));
    }
});


var response = {
    "id": 1,
    "jsonrpc": "2.0",
    "result": {
        "limits": {
            "end": 412,
            "start": 0,
            "total": 412
        },
        "movies": [
            {
                "genre": [
                    "Comedy",
                    "Horror",
                    "Thriller"
                ],
                "imdbnumber": "tt0096734",
                "label": "The 'Burbs",
                "movieid": 216,
                "tagline": "He's a man of peace in a savage land... Suburbia.",
                "title": "The 'Burbs",
                "year": 1989
            },
            {
                "genre": [
                    "Horror"
                ],
                "imdbnumber": "tt0101256",
                "label": "976-Evil II",
                "movieid": 10,
                "tagline": "Call if you dare!",
                "title": "976-Evil II",
                "year": 1992
            },
            {
                "genre": [
         ...