2014-03-30 3 views
1

내 목표는 한 페이지에서 다른 페이지로 전환하는 것입니다. Iron-Router로이 작업을 수행하는 방법을 알고는 있지만 창문이있는 사람들에게 Meteor를 가르치기 때문에 Iron-Router를 직접 프로그래밍하고 싶습니다. 따라서 Iron-Router가 필요하지 않습니다.Iron-Router 또는 모듈이없는 Meteor 0.8.0의 다중 페이지 응용 프로그램

편집 : 하위 질문 : 여기에서 제안 된 3 가지 방법이 더 효율적입니까?

내 첫 번째 방법 :

//HTML 
<body> 
    {{>mainTemplate}} 
</body> 

//Cliente JS Initially 
Session.set('current', 'initialTemplate') 
Template.mainTemplate = function() 
{ 
    return Template[Session.get('current')]; 
}; 

//Later 
Session.set('current', 'someOtherTemplate') 

이 매우 유성과 방식으로 작동하지만 그것은 IDE에 의해 확인되지 않고 오류를 유발할 수있는 수동 문자열을 많이 필요로한다. 그래서 내 두 번째 방법이이 해결하는 것입니다 : 그것은 매우 읽을 수있는 짧은이다,

//HTML 
<body> 
</body> 

//JS Client Initially 
UI.materialize(Template.initialTemplate, document.body); 

//Later 
$("body").html(""); 
UI.materialize(Template.someOtherTemplate, document.body); 

이 두 번째 접근 방식은 변수가 아닌 문자열을 사용, 간단하고 작동하지만 내가 jQuery를에 대해 조금 의심을 오전, 내가 먼저 오늘을 사용 . 또한 Meteor 내부에 HTML 덩어리를 삭제하는 것이 정말 편리할지 모르겠습니다. 가능하면 순수한 Meteoric 방식을 선호합니다.

미리 감사드립니다.

이 패턴은 현재 매력처럼 작동합니다! 누군가 간단한 것을 찾을 수 있습니까?

//HTML 
<body> 
    {{>mainTemplate}} 
</body> 

//JS Client Initially 
var current = Template.initialTemplate; 
var currentDep = new Deps.Dependency; 

Template.mainTemplate = function() 
{ 
    currentDep.depend(); 
    return current; 
}; 

function setTemplate(newTemplate) 
{ 
    current = newTemplate; 
    currentDep.changed(); 
}; 

//Later 
setTemplate(Template.someOtherTemplate); 

answer에서 촬영이 패턴과 Meteor docs이 seccion.

답변

1

필자는 Iron Routers를 추가 할 때 잔인 함으로 느껴지는 6 페이지 밖에없는 건물에 대해이 문제를 해결했습니다. 나는이처럼 내장 :

<body> 
{{> root}} 
</body> 

<template name="root"> 
    {{#if currentPageIs "home"}} 
    {{> home}} 
    {{/if}} 
    {{#if currentPageIs "about"}} 
    {{> about}} 
    {{/if}} 
    {{! etc. }} 
</template> 

그리고 당신은 내 경우 home 또는 about 또는 다른 네 페이지 이름을 될 수있는 세션 변수 currentPage를 정의; 링크 또는 버튼을 클릭하여 페이지를 변경하면 실제로 Session 변수 만 업데이트됩니다. 그런 다음이 "가난한 사람의 라우터"의 도우미는 다음과 같습니다.

Template.root.currentPageIs = function (page) { 
    return Session.equals("currentPage", page); 
}; 

그리고 그게 전부입니다. jQuery도없고 문자열로 템플릿을 사용하지도 않는다. (새로운 템플릿 엔진으로 Meteor 0.8에서 깨져야한다.) 완전 유성이야. 분명히 소수의 페이지/경로 이상으로이 접근법은 상당히 지루합니다. 패키지가 필요 없으며 Meteor 초보자를 이해하는 것은 매우 분명합니다.

<template name="home"> 
    <p>Welcome to our website! You can learn more 
    <a href="#" id="goToAbout">about us</a>.</p> 
</template> 

나는 그것을 시도하지만이 작동 것이라고 생각 위의 코드를 기반으로하지 않은

Template.home.events({ 
    "click #goToAbout": function (event, template) { 
    event.preventDefault(); 
    Session.set("currentPage", "about"); 
    } 
}); 
+0

질문 : '페이지'는 어디에서 왔으며 어떻게 설정합니까? –

+0

좋아요, handle/space 막대에 대해 조금 읽으십시오. 여전히 Session.set ('currentPage', 'somePage'); '을해야만 페이지를 전환 할 수 있다고 생각합니까? 이 문제는 세션 변수가 문자열이고 변수 값도 수동 문자열이라는 점입니다. –

+0

나의 마지막 코멘트가 참이면, 당신의 방법은 나의 첫 번째 방법과 동일합니다. –

1

:

완성도를 들어

, 여기에 예제 페이지와 페이지를 변경할 수있는 도우미는 다음과 같습니다

//HTML 
<body> 
    {{>mainTemplate}} 
</body> 

//Cliente JS Initially 
var current = Template.initialTemplate; 
var currentDep = new Deps.Dependency; 

Template.mainTemplate = function() 
{ 
    currentDep.depend(); 
    return current; 
}; 

//Later 
current = Template.someOtherTemplate; 
currentDep.changed(); 

이것은 '이상적인'솔루션을 기반으로하지만 잘만되면 세션 변수 var EJSON 가능 가치에 대한 제한

+0

멋진 패턴! 훌륭하게 작동합니다. Deps 모듈에 관해서는 depend()과 changed()가있을 때부터 읽어야 할 것입니다. 왜냐하면 그들이 읽을 수 있기 때문에 아이디어를 얻는 동안 저에게 blackmagic입니다. 이것을 현재의 이상적인 패턴으로 업데이트 하겠지만, 현재 내 자신의 inplementation에서 사용하는 약간의 도우미 기능을 추가합니다. –

관련 문제