In router we can pass the labels too:

  // ****     router.js       ****
import ...

export default Router.extend({
    renderPage (page, opts = {layout:true}) { ... }
    
    routes: { 
        '': 'public',
        'repos': 'repos',
        'login': 'login',
        'logout': 'logout',
        'auth/callback?:query': 'authCallback',
        'repo/:owner/:name': 'repoDetail'

    },
    public () { ... },
    repos () { ... },

    repoDetail (owner, name) {
        const model = app.me.repos.getByFullName(owner + '/' + name)
        // ++++ 1. add the labels collection
        // to make sure it's automatically observed
        this.renderPage(<repoDetail repo={model} labels={model.labels}/>)
    }
    
    login () { ... },

    authCallback (query) { ... },

    logout () { ... }   
})

In repo-details we add the mixin

  // ****     pages/repo-detail.js    ****
import React from 'react'
// ++++ 2. import the mixin
import ampersandMixin from 'ampersand-react-mixin'

export default React.createClass({
    // ++++ 1. add the mixin
    mixins: [ampersandMixin],
    displayName: 'RepoDetail'
    
    render () {
        const {repo} = this.props
        
        return (
            <div className='container'>
                <h1>{repo.full_name}</h1>
                <p></p>
                <ul></ul>
            </div>
        )    
    }
})

Explains why we need to do it manually (not to add to much overhead) (see router.js above line #23) Child objects don't get events sent to their parentsExplains how it would be that we let React handle everything by adding one top level component and everything is a child of that (may need to rewatch this part)

  // ****     pages/repo-detail.js    ****
import ...

export default React.createClass({
    mixins: [ampersandMixin],
    displayName: 'RepoDetail'
    
    render () {
        const {repo} = this.props
        
        return (
            <div className='container'>
                <h1>{repo.full_name}</h1>
                <p></p>
                <ul>
                // ++++ 1. render the list of labels
                {labels.map( label => {
                    return <li>{label.name}</li>
                })}
                </ul>
            </div>
        )    
    }
})