간단한 mithril router 예제.

http://meteorpad.com/pad/fH4tQSizz8vskj3N5/mithril_router

일단 링크.

Meteor.startup ->

  Home =
    controller: ->
      onunload: ->
        console.log "unloading home component"
    view: -> [
      m "div", "home"
      m "a[href=/dashboard]", config: m.route, "to Dashboard"
    ]

  Dashboard =
    controller: ->
    view: -> [
      m "div", "dashboard"
      m "h1",
        m "a[href=/]", config: m.route, "to home"
    ]

  m.route.mode = "pathname"
  m.route document.body, "/",
    "/": Home
    "/dashboard": Dashboard

소스는 http://mithril.js.org/mithril.html과 http://mithril.js.org/mithril.route.html 내용 참조.

1. router 진입시 필요한 것들은 controller 에서 사용하면 되는데
   unload시 처리는 onunload 을 return 값의 key로 사용하면 된다.
2. view에서 a 링크 처리시엔 { config: m.route } 를 사용하면 history API를 사용하여 이동한다.
3. m.route.mode 에서 URL 처리 규칙을 정할 수 있다. 기존 방식은 "pathname"을 "http://domain/#/dashboard" 처럼 hashbang을 사용하는 경우는 "hash"
   "http://domain/?/dashboard" 처럼 queryString을 사용하는 경우는 "search" 를 사용한다.

완전 좋네. 그냥 이 라우터에 Blaze.renderWithData (http://docs.meteor.com/#/full/blaze_renderwithdata)같은 걸 써버리고도 싶다.

어떻게 할 수 있을까 궁리를 해보자.
http://mithril.js.org/mithril.html#the-config-attribute

이걸 사용해 시도해보았다. Home 의 view 반환값 첫번째에 아래와 같이 구현하였다.

m "div#login", config: (element, isInitiated)->

  Blaze.render Template.loginButtons, element

element를 받아서 Template.loginButtons를 element 아래에 render하도록.

멋지게 작동한다. 더 좋은 방법이 있으면 댓글이나 메일로 알려달라.

나는 이것도 충분히 멋지다고 생각한다.

최종 코드는 아래와 같다. accounts-ui 와 accounts-password 등 계정 관련 패키지들이 있다는 가정하에 작성하였다.

Meteor.startup ->  

  Home =

    controller: ->

      onunload: ->

        console.log "unloading home component"

    view: -> [

      m "div#login", config: (element, isInitiated)->

        Blaze.render Template.loginButtons, element

      m "div", "home"

      m "a[href=/dashboard]", config: m.route, "to Dashboard"

    ]

  

  Dashboard =

    controller: ->

    view: ->

      m "div", "dashboard"

  

  m.route.mode = "pathname"

  m.route document.body, "/",

    "/": Home

    "/dashboard": Dashboard