Fetching User Repos

In notebook:
Building Modern Web Apps
Created at:
2016-01-27
Updated:
2016-06-12
Tags:
React libraries JavaScript backend Ampersand

Where to put now our repo collection?

We always want to fetch this list, no matter which page the user is on.

Ampersand model also lets you define child collections. So in me.js he can add a collections property
  // **** models/me.js ****
import ...
// ++++ 2. import repocollection
import RepoColleciton from 'repo-collection'

export default Model.extend({
    url: 'https://api.github/user',
    initialize () { ... },
    
    props: {...},
    
    session: {...},
    
    // ++++ 1. define the repos collection
    // just by defining it, already have
    // this is part of this model
    // you wont get change events on it
    collections: {
        repos: RepoCollection
    }
    
    onTokenChange () { ... },
    
    // --- 0. ajaxConfig is deleted, 
    // see previous note
//    ajaxConfig () {...}
    

    fetchInitialData () {
        if(this.token){
            this.fetch()
            // ++++ 3. fetch the repo collections (it's not automatic)
            // (every time you open the app)
            this.repos.fetch()
        }
    }
})
If you log the xhlhttprequests you see both models/collections being fetched in the browser
GitHub paging API... (limit is 30, little bit awkward to use)
Relationships in ampersand vs backbone

You get a foreign_key_id in your response. He creates a derived property (that you fetched separately). And this will return this property.
He says Backbone doesn’t have computed properties.
If you do fetch again it can sync the new data into the collection. You can even use
​setInterval(() => this.fetch(), 5000)​ to make sure data is not stale. (not elegant though)
​npm ls​ check with npm if you have all modules that are required