Mithril-friendly Model Layer

comment-model.js

var Comment = {}

Comment.store = Store('Comment', {idprop: 'id'});

Comment.fetchForPost = function (postId) {
  return m.request({ method: 'GET', url: '/api/post/' + postId + '/comments' })
    .then(Comment.store.syncAll)
}

Comment.update = function (attrs) {
  return m.request({ method: 'PUT', url: '/api/comments/' + attrs.id, data: attrs })
    .then(Comment.store.sync)
}

component.js

var PostPage = {}

PostPage.controller = function () {
  Comment.fetchForPost( m.route.param('id') )
}

PostPage.view = function (ctrl) {
  return Comment.store.map(function(comment) {
    m('.comment', comment.text)
  })
}

m.route(document.getElementById('app'), '/', {
  '/posts/:id': PostPage
})

store.js

var Store = function (modelName, opts) {
  opts = opts || {};
  var idprop = opts.idprop || 'id';
  var store = {}
  var api = {}

  api.all = function () {
    return Object.keys(store).map(function(id){ return store[id] })
  }

  api.map = function (callback) {
    var results = []
    for (var id in store)  results.push( callback(store[id]) )
    return results
  }

  api.find = function (id) {
    return store[id]
  }

  api.findBy = function (query) {
    for (var id in store) {
      if ( eq(query, store[id]) ) return store[id]
    }
    return null
  }

  api.sync = function (record) {
    if (! record[idprop]) throw new Error(modelName + '.store.sync() needs a property id')
    store[record[idprop]] = record
    return record
  }

  api.syncAll = function (records) {
    return records.map(api.sync)
  }

  api.clear = function () {
    store = {}
  }

  return api
}

function eq (pred, obj) {
  for (var prop in pred) {
    if (pred[prop] !== obj[prop]) return false
  }
  return true
}