2. template

Meteor Korea DEV School 2nd day
Template

발표자 소개
- 박승현
- ppillip@gmail.com
- http://digveloper.ppillip.com

템플릿(Template)
Handlebars , Spacebars , Spark 그리고 Blaze
미티어 초기에 버전에 Handlebar를 사용하기 시작, 이후에는 자체
적으로 개발한 템플릿 문법인 Spacebars 로 발전 하였습니다. 추
후에 Spark 템플릿 엔진으로 통합되었다가 현재는 Blaze 란 이름
으로 뷰엔진이 릴리즈 되었습니다.
이제는 1.0으로 출시 되었으니 안심?하세요 :)

템플릿(Template)
1. 템플릿으로 뷰 정의하기
2. helper 사용하기
3. 이벤트 처리하기
4. rendered 이해하기

템플릿(Template) – 1. 템플릿으로 뷰 정의하기
1. 기본 폴더 및 파일을 만들어 봅니다.
- client , public , server 폴더를 생성합니다.

1. 기본 폴더 및 파일을 만들어 봅니다.
- client , public , server 폴더를 생성합니다.
- ourQuiz.html : 기본이 되는 화면 입니다.
- userList.html : user 목록 템플릿입니다.
- userList.js : 템플릿에 필요한 js 입니다.

2. 템플릿을 뷰에 포함시키기 {{>templateName}}
ourQuiz.html
userList.html
userList.js

3. 템플릿의 manager – helpers , events , rendered
ourQuiz.html
userList.html
userList.js

템플릿(Template) – 2. helper 사용하기
1. 상수값 형태의 사용
userList.html userList.js

2. list 표현하기 {{#each ..}}{{/each}}

아.. sort 하고싶어!

멀로 sort 했어?!?
- underscore : “_” 약자로 쓰임
- 미티어 클라이언트 기본 패키지
- json 자료구조를 쉽게 다루게 해줌
- 미티어 코어 소스에도 많이 쓰임
- 비가오나 눈이 오나 화장실에서도
항상 외워야할 메소드들이 많아요!!

템플릿(Template) – 3. event 처리하기
그전에.. 싱거운 UI 를 좀 그럴사 하게....
1. atmospherejs.com 은 미티어의
패키지가 모여 있는곳입니다.
2. 트위터 부트스트랩3를 검색 합니다.
3. 그래프가 신뢰도를 말해줍니다. :)

그전에.. 싱거운 UI 를 좀 그럴사 하게....
1. 프로젝트 폴더로 이동합니다.
2. 패키지를 설치 합니다.
3. 이제 사용할수 있습니다.
재시작 할필요 없어요 :)

1. 실제 처리 대상인 템플릿으로 쪼개봅니다.
1. each구문안에 userListItem을 넣습니다.
2. tr 테그를 모듈로 하는 템플릿
userListItem 코드를 작성합니다.
3.이제userListItem 만 집중합니다.

1. 실제 처리 대상인 템플릿으로 쪼개봅니다.
1. tr 하나가 각각의 userItem으로 표현됩니다.
2. 추후 오브젝트 검색은 템플릿 안에서만
이루어집니다. Id 값은 되도록 쓰지 않습니다.
3. name 으로 템플릿 내에서 unique 하게
쓰는것을 권장합니다.

2. Template.userListItem.events 인자인 json 에 이벤트 핸들러함수를 넣습니다.
버튼에 이벤트 object 를 정의 합니다.
'click button' 를 key 로 하는 object 로 정의.
tr 안에 있는 button 을 클릭 했을경우 코드를
작성해 봅니다.

앞의 'click' 은 html object 의 이벤트 입니다.
keydown keyup 외
다른 이벤트도 사용 가능합니다.

앞의 'click' 은 html object 의 이벤트 입니다.
keydown keyup 외
다른 이벤트도 사용 가능합니다.
뒷쪽의 button 은 셀렉터 입니다.
Jquery 셀렉터에 해당하는 문법을 사용할수 있습니다.

3. template 안에서 this
template 과 evets 오브젝트 안에서의 this 는
{no:1,name:"김완선",email:"kws@gmail.com"}
데이터가 됩니다.

4. evt , tmpl 파라메터 분석
- 이벤트가 일어난 대상이
첫번째 파라메터가 됩니다.
- Jquery evetn object 이므로
$(evt.target) 을 사용하여
객체를 핸들링 할수 있습니다.

4. evt , tmpl 파라메터 분석
- 현재 template이
두번째 파라메터가 됩니다.
- findAll 메소드로 html 오브젝트를 조회 합니다.
** 다양한 메소드와 프로퍼티를 제공
(http://docs.meteor.com/#/full/template_inst)

템플릿(Template) – 3. rendered 이해하기
1. Template.템플릿명.rendered
템플릿이 돔에 랜더링 되는 최초의 순간에 호출됩니다.
단 1번만 호출됩니다.
2. Template.템플릿명.created
템플릿의 인스턴스가 생성되는 최초 한번에 호출됩니다.
3. Template.템플릿명.destroyed
템플릿이 어떤 이유에서든 삭제 될때 호출최는 콜백 함수입니다.
다시랜더링 될때는 호출되지 않습니다.
** 미티어는 변경부분만 랜더링 합니다.

2. template

More Related Content

What's hot (20)

Similar to 2. template (20)

2. template