Mithril + Mobservable Experiments Again

by ramnathv

HTML

<script src="//cdn.rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>

CoffeeScript

{observable, autorun} = mobservable


person = observable
  # Observable State
  firstName: "Michael"
  lastName: "Westrate"
  nickName: ""
  # Computed Values
  fullName: -> @firstName + " " + @lastName
  
# Reaction: Log the profile info whenever it changes
autorun -> 
  console.log if person.nickName then person.nickName else person.fullName



# Example Mithril Component that Observes State
profileView = view: (ctrl, props) ->
  if props.person.nickName
    m 'div', props.person.nickName
  else
    m 'div', props.person.fullName


# Action
setTimeout (-> person.nickName = "mwestrate"), 5000
autorun ->
  m.mount(
    document.body,
    m profileView, {person: person}
  )