Node.js Q&A

[cookbook] Meteor.ui #2 더 구조적으로 표현해보자

Meteor.ui #2 Introduction

Meteor.ui #1에 이어 두번째 시간입니다. 이번에는 Meteor.ui 를 더 구조적으로 표현할 수 있도록 도와주는 API에 대해서 살펴보겠습니다.

mvvm

Source path

파일위치는 /usr/local/meteor/packages/liveui/liveui.js 이며, ui 코어소스는 고급기술들이 많으니 살펴보시면 도움이 안되지는 않을거에요.

Meteor.ui.chunk

Meteor.ui.render 기능으로 충분히 사용할 수 있으나, Backbone.js 에서 각 row 를 표현하는 것을 1개의 view 로 작성하듯이, Meteor.ui.render 의 html_func 인자 부분을 더 조각(chunk)내어 구조적으로 표현할 수 있습니다. 이 구조적이란 표현은 Backbone.js 사용하신 분들은 더 이해가 빠르실 듯 하네요. 그리고, 이것은 아래 설명한 Meteor.ui.listChunk의 일부분입니다.

syntax

Meteor.ui.chunk(html_func, [options])

example

//
// 2개의 chunk 를 사용하였고,
// return 되는 값은 문자열 이므로 + 기호로 붙일 수 있습니다.
// Meteor.ui.render 의 결과값인 DocumentFragment 타입을 appendChild 으로
// 바로 화면에 표시합니다.
// 
document.body.appendChild(
  Meteor.ui.render(function() {
    return "<div>" +
      Meteor.ui.chunk(function() { return Session.get("greeting"); }) +
      " " +
      Meteor.ui.chunk(function() { return Session.get("target"); }) +
      "</div>";
  }));

Meteor.ui.listChunk

굉장히 중요한 API입니다. Meteor.ui.render는 한셋트의 html_func를 사용하여 이벤트를 설정할 수 있는데, 이것은 databaes query를 모니터링하고, 리턴되는 cursor의 갯수만큼 Meteor.ui.chunk를 표현할 수 있으며, 값이 변화될때마다 자동으로 Meteor.ui.render 으로 전달됩니다. 이벤트도 Meteor.ui.chunk별로 설정이 가능하다는 것!

syntax

Meteor.ui.listChunk(observable, doc_func, [else_func], [options])

example

아래 예제는 Posts collection에서 tags 필드에 frontpage 단어를 검색하여 <div>~</div> 구문에 표현하고, 각각의 div에 클릭이벤트를 부여하여 Session 값을 세팅 한후, 재클릭했을 때, selected 라는 className을 부여하는 내용입니다.

Session.set("selected", null);

var frag = Meteor.ui.render(function() {
  return Meteor.ui.listChunk(Posts.find({tags: "frontpage"}),
    //
    // Posts.find 갯수만큼 callback 이 실행됩니다.
    //
    function(post) {
      var style = Session.equals("selected", post._id) ? "selected" : "";

      return '<div class="' + style + '">' + post.name + '</div>';
    },
    //
    // 이벤트 설정
    //
    { events:
      {
        //
        // 보통 형태가 eventName className 이었는데,
        // className 을 생략하고 전체에 이벤트를 설정합니다.
        //
        'click': function (event) {
          Session.set("selected", this._id);
        }
      }
    });
});
document.body.appendChild(frag);

Conclusion

이것으로 Meteor.ui 의 API대해서 알아보았습니다. 실제 다이나믹하게 html element를 생성하여 화면에 표시하고 제거하는 작업들을 대부분 경험하셨을텐데, 왜 굳이 이런 함수들을 써야 하는지에 대한 이유는 바로 reactivity 때문입니다. 그럼 다음 시간에 뵙겠습니다. 감사합니다.