Mithril with mobservable
HTML
<script src="//rawgit.com/mweststrate/mobservable/master/dist/mobservable.min.js"></script>
<div id="root">
</div>
CoffeeScript
List =
view: (ctrl, props) ->
m 'ul', props.items.map (d, i) -> m 'li', d
Button =
view: (ctrl, props) ->
m 'button', {
onclick: props.resetTimer
}, "Seconds elapsed: #{props.N}"
{observable, autorun} = mobservable
Timer = observable
N: 0
resetTimer: (e) -> Timer.N = 0
tick: -> setInterval((=> @N++), 1000)
Timer.tick
autorun -> m.render(
document.getElementById("root"),
#m.component List, {items: [1..obj.N]}
m.component Button, Timer
)
TodoStore = ->
todos: observable([])
addTodo: (task) ->
@todos.push task: task, completed: false
completedTodosCount: =>
@todos.filter (t) -> t.completed is true
report: ->
if @todos.length is 0
"<none>"
else
console.log JSON.stringify(@todos)
###
myStore = TodoStore()
autorun -> m.render(
document.getElementById("root"),
m.component List, {items: myStore.todos}
)
myStore.addTodo('new')
myStore.addTodo("another")
###