basic data flow example

breadcrumbs.js

import * as m from 'mithril'

// this is a "presentation" component and knows nothing about the world
export const view = (_, { link }) => m('.nav', m('.breadcrumbs', [
  m('a', { href: link })
]))

entry.js

import * as m from 'mithril'
import * as x from './x'
import * as y from './y'

m.route(document.body, '/', {
  'x': x,
  'y': y
})

layout.js

import * as m from 'mithril'
import * as breadcrumbs from './breadcrumbs'

// this is a "container" compnoent and is aware of at least some of our model
export const view = (_, { model, view }) => m('.container', [
  m.component(breadcrumbs, { link: model.nav.link() }),
  view
])

model.js

import * as m from 'mithril'

// we only export a factory so components cannot inexplicably require our state out of proper flow
export default () => ({
  nav: {
    link: m.prop()
  },
  
  main: {
    something: m.prop()
  }
})

sharedView.js

import * as m from 'mithril'
import * as layout from './layout'
import * as something from './something'

export const controller = (model) => {
  m.request('someserver')
    .then(model.nav.link)
    .then(m.redraw)
}

// this is a "container" component and is aware of at least some of our model
export const view = (_, model) => m.component(layout, {
  
  // if we wanted to, we could turn the layout component into a presentation one by passing it
  // whatever it needs instead of our model directly. Use your discretion when this would help or hinder
  // maintainence in your app 
  
  // here, we could have dozens of independent views which all reference layout, and layout could be updated
  // to require something new from the model at any point, requiring us to change all of those views
  // so making it a "layout" component appears to be the better choice for keeping our app organized
  // and maintainable
  model,
  view: m('.view', [ 
    // "container" components can map our model however they need to to child components
    m.component(something, { text: model.main.something() })
  ])
})

something.js

import * as m from 'mithril'

// this is a "presentation" component and knows nothing about the world
export const view = (_, { text }) => m('p', text)

x.js

import * as sharedView from './sharedView'
import model from './model'

// controller is understandable as our view's state
// we make it our model factory function so that we get
// a fresh state as the component is created
export const controller = model

// in a real app, we'd have more diversity between our views, 
// but here we just call the shared view component directly in this toy example
export const view = (state) => m.component(sharedView, state)

y.js

import * as sharedView from './sharedView'
import model from './model'

// controller is understandable as our view's state
// we make it our model factory function so that we get
// a fresh state as the component is created
export const controller = model

// in a real app, we'd have more diversity between our views, 
// but here we just call the shared view component directly in this toy example
export const view = (state) => m.component(sharedView, state)