태그 보관물: 미스릴

(Javascript | mithril ) m.withAttr – 양방향 바인딩을 위한 이벤트 매퍼

mithril 관련 글

  1. mithril 앱의 기본 구성 및 m()
  2. m.render – 가상 DOM 렌더링하기
  3. m.mountmithril을 이용한 양방향 바인딩 & 템플릿 렌더링
  4. m.prop 양방향 바인딩을 위한 데이터 래퍼
  5. * m.withAttr 양방향 바인딩을 위한 이벤트 매퍼
  6. m.componentmithril 앱을 컴포넌트 화하기
  7. Todo
  8. m.route – 단일페이지 애플리케이션 및 라우팅 규칙
  9. m.request – 서버 API와 통신하기

m.withAttr이벤트핸들러를 생성하는 팩토리함수이다. 이는 가상 DOM요소에 대해서 해당 DOM 요소의 특정 속성값을 넘겨받는 이벤트 핸들러로 사용할 수 있는 함수를 만들어주는 편의 메소드라 보면된다. 보통 MVC 모델에서 UI 요소의 특정 세부 속성을 m.prop()으로 정의한 컨트롤러의 특정 속성과 연결하는 작업을 할 때 사용한다.

EventHander withAttr(String property, void callback(any value) [, any callbackThis])
where
    EventHandler :: void handler(Event e)

보통 view 내에서 클릭이나 키 이벤트로 DOM 요소의 변경된 속성을 컨트롤러의 바인딩된 요소로 전달해 주는 역할을 수행할 때 사용한다.

user = do
  model: (name) !-> @name = m.prop name
  controller: -> {user: new user.model("John Doe")}
  view: (ctrl) ->
    m.render \body, 
        m \input do
          onchange: m.with-attr \value, ctrl.user.name
          value: ctrl.user.name!

위 코드의 결과를 렌더링하면 input 필드에 John Doe라는 값이 들어가있는 상태가 출력된다. 이 때 키보드로 이를 변경하면 onchange 이벤트가 발생하는 시점에 해당 변경 사항이 user 컴포넌트의 컨트롤러 내 name 속성에 저장, 업데이트 되게 된다. 그리고 redraw가 일어나 다시 변경된 값이 들어간 input 필드가 그려지게 된다.

(Javascript | mithril) m.render – 가상 DOM 렌더링하기

mithril 관련 글

  1. mithril 앱의 기본 구성 및 m()
  2. * m.render – 가상 DOM 렌더링하기
  3. m.mountmithril을 이용한 양방향 바인딩 & 템플릿 렌더링
  4. m.prop 양방향 바인딩을 위한 데이터 래퍼
  5. m.withAttr 양방향 바인딩을 위한 이벤트 매퍼
  6. m.componentmithril 앱을 컴포넌트 화하기
  7. Todo
  8. m.route – 단일페이지 애플리케이션 및 라우팅 규칙
  9. m.request – 서버 API와 통신하기

m.render

m.render는 미리 구성된 컴포넌트 단위를 주어진 DOM 위에 렌더링하는 일을 담당한다. 이 메소드가 동일한 가상 DOM 세트에 대해서 한 번 이상 호출되는 경우에는 기존 DOM 트리와 신규 트리 사이의 차이를 지능적으로 분석하여 변경이 일어난 부분에 대해서만 재 렌더링을 하는 방식으로 성능을 높이게끔 동작한다. 계속 읽기