Storing Labels Solution

In notebook:
Building Modern Web Apps
Created at:
2016-01-28
Updated:
2016-01-29
Tags:
libraries JavaScript React Ampersand
In directory models two files: label.js and label-collection.js
  // ****     label.js            ****
import Model from 'ampersand-model'

export default Model.extend({
    props: {
        name: 'string',
        color: 'string'
    }
})
  // ****     label-collection.js     ****
import Collection from 'ampersand-rest-collection'
import Label from './label'
import githubMixin from '../helpers/github-mixin'

export default Colleciton.extend(githubMixin, {
    url () {
        return this.parent.url() + '/labels'
    }
    
    model: label
    
})
  // ****     repo.js    ****
import Model from 'ampersand-model'
import githubMixin from '../helpers/github-mixin'
// ++++ 2. import the collection
import LabelCollection from 'label-collection'

export default Model.extend(githubMixin, {
    url () {
        return 'https://api.github.com/repos/' + this.full_name
    },
    
    props: {
        id: 'number',
        name: 'string',
        full_name: 'string'
    },

    derived: {
        appUrl: {
            deps: ['full_name'],
            fn () {
                return '/repo/' + this.full_name
            }
        }
    },
    
    // ++++ 1. add label collection
    collections: {
        labels: LabelCollection
    }
    
})
Now any time we create a repo a new child collection labels is created as well (from the label-collection)

full_name already contains owner/reponame

Fetching

We want combine so that ​fetch​ gets both (repo and labels). We can override ​fetch​ .
  // ****     repo.js    ****
import ...

Nexport default Model.extend(githubMixin, {
    url () { ... },
    
    props: { id: 'number',  name: 'string', full_name: 'string' },

    derived: {
        appUrl: {
            deps: ['full_name'],
            fn () { return '/repo/' + this.full_name }
        }
    },

    collections: {
        labels: LabelCollection
    },
    // ++++ 1. override fetch
    fetch () {
        this.labels.fetch()
        // we have access to the model we're accessing through the prototype, so we can call it's method
        Model.prototype.fetch.apply(this, arguments)
    }
    
})