Meteor로 다중 페이지 응용 프로그램을 어떻게 생성합니까?
저는 Javascript를 처음 접했고 호기심으로 Meteor를 다루기 시작했습니다. 정말 놀라운 점은 모든 HTML 콘텐츠가 하나의 페이지로 결합되는 것 같습니다.
특수 페이지로 연결되는 URL 처리를 도입하는 방법이 있다고 생각합니다. "todo"예제는 일종의 Router클래스 를 통해이를 수행 할 수있는 것 같습니다 . 이것이 URL 처리의 "표준"방식입니까?
URL을 처리 할 수 있다고 가정 할 때 별도의 페이지를 표시하도록 HTML 코드를 어떻게 구성합니까? 제 경우에는 각각 완전히 별개의 데이터 세트를 가질 수 있으므로 HTML 코드를 전혀 공유 할 필요가 없습니다.
Jon Gold의 대답은 정확했지만 Meteor 0.5.4 현재 :
작업은 이제 Iron Router로 이동했습니다. 새 프로젝트에서 라우터 대신 IR을 사용하는 것을 고려하십시오!
따라서이를 수행하는 현재 "표준"방법은 IronRouter 를 사용하는 것 입니다.
내가 아는 한, 현재이를 수행하는 즉시 사용할 수있는 방법은 없습니다.
내가 제안하는 것은 Backbone.js 스마트 패키지를 사용하는 것입니다. Backbone.js는 푸시 상태 라우터와 함께 제공되며 사용자의 브라우저가이를 지원하지 않는 경우 해시 URL로 대체됩니다.
유성 앱 디렉토리에 this meteor add backbone.
그런 다음 클라이언트 측 코드 어딘가에 다음과 같이 Backbone.js 라우터를 만듭니다.
var Router = Backbone.Router.extend({
routes: {
"": "main", //this will be http://your_domain/
"help": "help" // http://your_domain/help
},
main: function() {
// Your homepage code
// for example: Session.set('currentPage', 'homePage');
},
help: function() {
// Help page
}
});
var app = new Router;
Meteor.startup(function () {
Backbone.history.start({pushState: true});
});
그런 다음 Handlebars 템플릿의 어딘가에 Session의 "currentPage"에 설정된 값을 기반으로 페이지를 렌더링하는 도우미를 만들 수 있습니다.
backbone.js 라우터에 대한 자세한 정보는 http://backbonejs.org/#Router 에서 찾을 수 있습니다.
Metoer에서 Handlebars 도우미 메서드를 만드는 방법에 대한 관련 정보도 http://docs.meteor.com/#templates 에서 확인할 수 있습니다.
도움이 되었기를 바랍니다.
Meteor-Router 는 이것을 정말 쉽게 만듭니다. Telescope를 좋은 참고 자료로 사용하여 구축 한 일부 앱에서 사용하고 있습니다. Telescope의 router.js 살펴보기
그것을 사용하려면…
mrt add router
client / router.js에서 :
Meteor.Router.add({
'/news': 'news', // renders template 'news'
'/about': function() {
if (Session.get('aboutUs')) {
return 'aboutUs'; //renders template 'aboutUs'
} else {
return 'aboutThem'; //renders template 'aboutThem'
}
},
'*': 'not_found'
});
템플릿에서…
<body>{{renderPage}}</body>
나는 같은 문제를 발견했다. 코드가 커지면 코드를 깨끗하게 유지하기가 어렵습니다.
이 문제에 대한 나의 접근 방식은 다음과 같습니다.
I separate the different html pages as I would do with another web framework. There is an index.html where I store the root html page. And then for each big functional part I create a different template and place it in one different html. Meteor then merges them all. Finally I create a session variable called operation where I define what to show at each time.
Here goes a simple example
index.html
<head>
<title>My app name</title>
</head>
<body>
{{> splash}}
{{> user}}
{{> debates}}
</body>
then in splash.html
<template name="splash">
{{#if showSplash}}
... your splash html code goes here...
{{/if}}
</template>
then in user.html
<template name="user">
{{#if showUser}}
... your user html code goes here...
{{/if}}
</template>
and so on ...
In the javascript code then I check when to print each template using the Session variable, like this:
Template.splash.showSplash = function(){
return Session.get("operation") == 'showSplash';
}
Finally the Backbone Router manages this Session variable
var DebateRouter = Backbone.Router.extend({
routes: {
"": "showSplash",
"user/:userId": "showUser",
"showDebates": "showDebates",
// ...
},
splash: function () {
Session.set('operation', 'showSplash');
this.navigate('/');
},
user: function (userId) {
Session.set('operation', 'showUser');
this.navigate('user/'+userId);
},
// etc...
});
I hope this pattern is helpful for other Meteor developers.
This is my hacky solution to routing : https://gist.github.com/3221138
Just put the page name as the template name en navigate to /{name}
ReferenceURL : https://stackoverflow.com/questions/11740368/how-do-i-create-multi-page-applications-with-meteor
'programing' 카테고리의 다른 글
| Java 빌더 패턴에 해당하는 Scala는 무엇입니까? (0) | 2021.01.07 |
|---|---|
| gdb에서 바이너리 모드로 인쇄하는 방법은 무엇입니까? (0) | 2021.01.07 |
| 자바 스크립트의 '설명'키워드 (0) | 2021.01.07 |
| svg viewBox 속성 (0) | 2021.01.07 |
| 데이터 프레임에서 마지막 요소의 액세스 인덱스 (0) | 2021.01.07 |