[cookbook] Meteor.ui #1

Meteor.ui #1 Introduction

앞으로 엄청난 이름값 할 것으로 예상되는 Meteor 연재를 시작합니다. 뉴스기사참조

잡스러운 Meteor 이론부분은 모두 재끼고, 각각의 API 부터 맛보며 Meteor를 즐겨보겠습니다. 장문을 작성하기 보다는 짧게 끊어서 연재하도록 하겠습니다. 첫번째 시간에는 Meteor.ui 입니다. 한번 보시죠. gogogo

아래 동영상은 meteor 소개동영상입니다.

mvvm

Feature

Meteor.ui.render

syntax

Create DOM nodes that automatically update themselves as data changes. 별거 없습니다. DOM node 생성합니다. 리턴값은 DocumentFragment 입니다. 아래 그림 참조

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

fragment

document.createDocumentFragment()Meteor.ui.render 의 결과값은 같은 형식을 보여줍니다.

fragment

example #1

이 예제는 return 값이 javascript에서 일반적으로 사용하는 DocumentFragment 라는 것입니다. 즉 이것은 document.body.appendChild 에 의해서 화면에 표현될 수 있습니다.

var a = Meteor.ui.render(function() {
  return "hi";
});
console.log(a);

var a = document.createDocumentFragment();
console.log(a);

example #2

이 예제는 2개의 html element를 삽입하고, 2번째 인자에 events 설정하는 예제입니다. 이런 구문은 Event Delegation 을 굉장히 편하게 제공하는 방법이라 생각됩니다. Backbone.js 를 사용하셨던 분들이라면 익숙하실 것입니다.

var frag = Meteor.ui.render(function () {
    return '<span class="inc">Increase</span>' +
           '<span class="dec">Decrease</span>';
},
  //
  // 이벤트 설정
  //
  {
    events: {
      //
      // 이것은 Backbone.js 에서 사용하는 방법과 동일한데요.
      // event_name class_name 이런 순으로 설정할 수 있습니다.
      //
      'click .inc': function (event) {
        console.log('inc');
      },
      'click .dec': function (event) {
        console.log('dec');
      }
    }
  }
);
document.body.appendChild(frag);

이것의 결과는 2개의 span element 에 click event 를 설정합니다.

Conclusion

Meteor.ui 는 중요한 API 중 하나이고, 데이타를 bind하고 이를 표현하는데 있어서 가장 중요하다고 생각합니다. 그럼 다음 시간에는 Meteor.ui 나머지 기능에 대해서 알아보겠습니다. 감사합니다.

추천 관련글