Router 만들기 /w Meteor
SPA
Single Page Application
어플인듯 어플아닌 어플같은 너
URL은?
SPA라니까요
하지만...
- Facebook 공유는요.
- Twitter 공유는요.
- 메신저 공유는요.
- 공유는요.
- 공유..
- ..
- Mobile App에서도 진입점은 필요
만들어봅시다.
- URL을 패턴을 분석합니다.
- 패턴별로 특정 Template을 보여줍니다.
언제 적용하나요?
- 최초 로딩 시
- 클릭 및 특정 이벤트 발생시
Regular Expression
Test &
Match
/
/add
/view/one
^\/$
^\/add$
^\/view\/([^\/]+)$
Router 정의
router.routes = {
"home": {
rule: /^\/$/
},
"view": {
rule: /^\/view\/([^/]*)$/,
params: ["scream"]
}
};
router.notfound = "notfound";
Template
<template name="main">
{{> Template.dynamic template=getRoute}}
</template>
<template name="home">
...
</template>
<template name="view">
...
</template>
Session /w Reactive
get/set Path
getPath: function(pathname) {
return
pathname ||
Session.get('pathname') ||
location.pathname;
},
setPath: function(path) {
return
Session.set('pathname',
path);
}
Helper
Template.main.helpers({
getRoute: function () {
return router.getRoute(router.getPath());
}
});
Problem?
History
어이쿠 손이 미끄러졌네←←←
뒤로 가기를 자꾸 눌러요 ;ㅅ;
그러면 어떻게?
History를 만든다
원래는 없는 거여요~
이렇게 된 이상 만들어 줍니다.
세가지만 기억하세요
replaceState
pushState
popstate
