Ember Collection View

Ember Collection View

by Nirvanachain

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.min.js"></script>
<script type="text/x-handlebars">
  <nav>
    {{#link-to 'home'}}Home{{/link-to}}
  </nav>
  <div class="container">
      {{view 'list'}}
  </div>
</script>

CSS

nav {
    border-bottom: 1px solid black;
    padding: 1em;
}

.container { 
    padding: 1em;
}

JavaScript

App = Ember.Application.create();

App.ListView = Ember.CollectionView.extend({
    tagName: 'ul',
    
    //How do I set the content to be the data from the API???
    content: App.Page,
    
    itemViewClass: Ember.View.extend({
        template: Ember.Handlebars.compile('the letter is = {{view.content}}')
    })
});

App.ApplicationAdapter = App.RESTAdapter = DS.RESTAdapter.extend({
    host: 'https://api.mongolab.com/api/1/databases/embertest2/collections',
   
    //Construct query params for adding apiKey to the ajax url
    findQuery: function(store, type, query) {
        var url = this.buildURL(type.typeKey), 
        proc = 'GET', 
        obj = { data: query },
        theFinalQuery = url + "?" + $.param(query);
        console.log('url =',url);
        console.log('proc =',proc);
        console.log('obj =',obj);
        console.log('theFinalyQuery =',theFinalQuery);
        return this._super(store, type, query);
    }    
});

App.ApplicationSerializer = DS.RESTSerializer.extend({
    normalizePayload: function(payload) {
        var pagesArray = [];
        payload[0].pages.forEach(function(element, index) {
            element.id = index;
            pagesArray.push(element);
        })
        
        return {pages: pagesArray};
    }
});

App.Page = DS.Model.extend({
    character: DS.attr('string'),
    title: DS.attr('string')
});


App.HomeRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('page', {apiKey: 'qcVNgNb-s1X4WJkLeRDfykxqtMG-ezkC'});   
    }
});

App.Router.map(function() {
  this.route('home', {path: '/'});
});