Ember Data Recodrs reference

by amindunited

HTML

<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">
    <h2>Video</h2>
    {{#each videoSet in content.content}}
        {{#each film in videoSet.films}}
            {{#link-to 'film' film.id}}
                {{film.title}}
            {{/link-to}}
        {{/each}}
    {{/each}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="film">
    <h3>Film</h3>
    {{title}}
    {{details}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="audio">
    <h2>Audio</h2>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="books">
    <h2>Books</h2>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="images">
    <h2>Images</h2>
    {{outlet}}
</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>

JavaScript

App = Em.Application.create();

App.ApplicationAdapter = DS.ActiveModelAdapter.extend();

App.Router.map(function(){
    this.resource('video', {path:'/video'}, function(){
        this.resource('film', {path:'/film/:film_id'}, function(){
        
        });
    });
    this.resource('audio', {path:'/audio'}, function(){
    
    });
    this.resource('books', {path:'/books'}, function(){
    
    });    
    this.resource('images', {path:'/images'}, function(){
    
    });
});
/*
App.VideoSerializer = DS.ActiveModelSerializer.extend(DS.EmbeddedRecordsMixin, {
    attrs: {
        films: {embedded: 'always'}
    }
});
*/

App.Video = DS.Model.extend({
    //films: DS.hasMany('film')
    films: DS.attr()
});

App.Film = DS.Model.extend({
    video: DS.belongsTo('video'),
    title: DS.attr(),
    //details: DS.belongsTo('filmDetails', {async: true})
});

App.FilmDetails = DS.Model.extend({
    film: DS.belongsTo('film', {async: true}),
    ooga: "booga"
});
App.FilmView = Em.View.extend({
    didInsertElement: function(){
        console.log('Film View ', 
                    this.get('controller.content'),
                    this.get('controller.content.details')
                   );
    }
});
App.FilmRoute = Em.Route.extend({
    model: function(params){
        var film = this.store.find('film', params.film_id);
        
        console.log('film', film);
        return film;
    }
});

App.VideoRoute = Em.Route.extend({
    model: function(){
        var videos = this.store.find('video');
        console.log('cot videos ', videos);
        return videos;
    }
});

App.VideoView = Em.View.extend({
    didInsertElement: function(){
        console.log('did Insert ... ', this.get('controller.content.content')[0].get('films'));
    }
});

var videosObj = [{
    id:1,
    films: [{
        id: 1,
        title: 'Film 1'
    },{
        id: 2,
        title: 'Film 2'
    },{
        id: 3,
        title: 'Film 3'
    },{
        id: 4,
        title: 'Film 4'
...