(Javascript | mithril ) m.prop – 양방향 바인딩을 위한 데이터 래퍼

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.prop()

mithril의 양방향 데이터 바인딩을 구현하는 아이디어는 의외로 간단하다. 페이지내 앱에서 사용되는 데이터 모델을 기본적인 수준의 getter-setter 패턴으로 감싼다. 그리고 UI 이벤트를 통해서 모델의 값을 변경할 때, 컨트롤러 레이어는 모델을 직접 수정하는 것이 아니라 setter를 이용한다. 그리고 setter함수는 모델의 내용을 변경하는 동작의 앞 뒤로 변경 시작과 끝을 프레임워크에 알려준다. 이 때 이와 관련된 m()으로 렌더링된 요소가 이 값에 의존하는지를 확인하면 쉽게 UI 업데이트 필요 여부를 알 수 있다. 이에 의해 mithrilredraw가 일어나야 할지 여부를 판단하게 된다.

m.prop() 은 이 때 사용되는 getter-setter 패턴의 접근자 래퍼이다. 인자가 전달되면 전달받은 인자를 집어넣고, 인자 없이 전달되면 들어가 있는 값을 내놓는다.

var name = m.prop('john');
var a = name(); // 'john'
name("Mary"); // name <- 'Mary'
var b = name(); // 'Mary'

[[m.withAttr()]]은 반대로 UI 요소 부분에서 특정 요소의 특정 속성값으로 setter를 호출하게끔하는 함수이다. 이 둘을 잘 결합하면 쉽게 양방향 바인딩을 구성할 수 있다.

또한 나중에 보게 되겠지만, 네트워크 요청등의 비동기 작업에 대해 .then()과 결합하여 그 자체로 콜백으로 쓰일 수 있다.

m.prop으로 감싼 객체는 그 자체로는 getter-setter 함수이지만, JSON으로 직렬화하면 감싸고 있던 객체의 문자열 값으로 자동으로 변경된다.

data = foo: m.prop \bar
JSON.stringify data |> console.log
# '{"foo": "bar"}'