1. 홈
  2. 질의 응답
  3. 경로 변경시 Meteor/Iron 라우터가 다시로드되지 않도록하십시오.

경로 변경시 Meteor/Iron 라우터가 다시로드되지 않도록하십시오.

2014-12-29 2 views
6

유/철 라우터가 경로를 변경할 때마다 전체 페이지가 새로 고쳐집니다.경로 변경시 Meteor/Iron 라우터가 다시로드되지 않도록하십시오.

왜 이런 일이 발생하며 어떻게 방지 할 수 있습니까?

내가 경로 설정은 모든 새로운 경로에 대한이 같은 것입니다있는 방법 ...

Router.route('/route/:_some_param', { 
    name: 'something', 
    onBeforeAction: function(){ // Something }, 
    waitOn: function(){ // Some subscription }, 
    action: function(){ // Something }, 
})

나는 여러 경로 설정이 방법이있다. 페이지에서 페이지로 이동할 때마다 Meteor는 전체 페이지를 다시로드합니다. 그러나 하나의 경로에 머물면서 매개 변수를 변경하면 Meteor는 필요한 항목 만 다시로드합니다. 이는 항상 원하는 항목입니다.

출처

2014-12-29 Mcope

+0

정확하게 똑같은 문제가 있습니다. 문제를 해결할 수 있었습니까? 이상하게도 앵커를 클릭하면 전통적인 철제 라우터 동작이 수행되는 반면 다른 앵커는 전체 페이지를 다시로드하는 경우가 있습니다. – tomitrescak

+0

@ user1348303 아래 내 대답을 확인하십시오. 그것은 왜 당신이 노선 사이이 격차를보고 있는지 설명하는 데 도움이 될 수 있습니다. –

답변

1

철 라우터가 어떻게 작동하는지 관찰하는 것이 중요하다고 생각합니다. {{> yield }} 템플릿 자리 표시자를 사용하여 마스터 템플릿을 만들고 Iron Router가 해당 경로에 지정된 템플릿에 대해 스왑 아웃합니다. 다른 경로를 선택하면 {{> yield }}이 새 템플릿을 가리키고 페이지의 일부가 다시 렌더링됩니다. 마스터 템플릿의 {{> yeild }} 범위를 최소화하여 스왑 아웃되는 페이지의 양을 최소화 할 수 있습니다. 다만 "배짱"나는 경로를 이동하면

<html> 
    {{> header }} 
    {{> yield }} 
    {{> footer }} 
</html>

, 머리글과 바닥 글이 전혀 업데이트되지 않습니다

예를 들어, 내 템플릿에이 같은 헤더와 바닥 글을 그들 사이에.

출처

2014-12-30 13:21:49 CodeChimp

+1

아니, 여기에 진짜 문제가 있다고 생각합니다. 때때로 경로를 변경하면 완전한 브라우저가 새로 고쳐집니다.FWIW, 지금까지 '/'경로에서 내 경로를 변경할 때만 브라우저 새로 고침이 발생했습니다. – bengreene

+0

페이지 다시로드가 페이지 다시 렌더링과 다릅니다. – patwhite

1

정확히 페이지를 어떻게 변경하고 있습니까? Meteor는 기존 앵커 태그를 앵커 도구로 사용하는 경우 전체 페이지를 다시로드합니다. 예를 들어

, 당신은 템플릿 사이에 탐색하고 구조의 이러한 종류 사용하는 경우 : 당신이 실제로 경로를 변경할 수있는 브라우저를 알려 앵커 태그를 사용하는 것처럼

<a href="/pathToTemplate">Let's go to the new template!</a>

유성은 전체 페이지를 다시로드됩니다. 이 구조를 사용하는 경우 :

<a href="{{pathFor 'yourTemplateName'}}">To the new template ahoy!</a>

링크는 당신을위한 템플릿을 변경하고 단지 당신이 당신의 {{> 수율}} 지역에있는 코드를 새로 철 라우터를 말할 것이다. 링크를 올바른 페이지로 연결하려면 pathFor 도우미의 'yourTemplateName' 섹션에 라우터의 name:... 필드에 나열된 항목을 넣어야합니다.

간단히 말해 전체 브라우저 새로 고침을받는 이유는 브라우저를 사용하여 기본 Meteor 및 Iron Router 도우미를 사용하는 대신 링크를 전환하여 로직을 계산하기 때문일 가능성이 큽니다 전환을 위해. 이 도우미로 할 수있는 일이 훨씬 더 많습니다. 추가 정보가 필요하면 경로 및 링크 템플릿 도우미 섹션을 Iron Router's Git page에 체크 아웃하는 것이 좋습니다.

페이지의 특정 부분 만 새로 고치고 나머지는 그대로 유지하면 CodeChimp의 대답을 사운드 그대로 참조하게됩니다. 다양한 물건에 대한 다양한 레이아웃 템플릿이 필요한 경우 Layouts 섹션을 통해 코드를 멋지게 멋지게 만들 수 있으며 어쩌면 폭발적인 건물에서 멀리 떨어져있는 유일한 영웅과 같은 능글 맞은 웃음을 짓게 할 수도 있습니다.당신이 작업을 수행 할 수있는 링크를 사용해야 할 경우 당신이 찾을 수 있습니다

또 다른 상황은,하지만 당신은 이벤트를 납치하고 페이지를 다시 렌더링하는 브라우저를 원하지 않는다. 이 경우 일반적으로하는 것처럼 HTML을 설정 한 다음 id, 클래스 또는 태그 이름으로 click 이벤트를 수신하고 템플릿에 해당하는 javascript 파일에서 다음 코드 구조를 사용하여이 요소를 대상으로 지정합니다. 이는 Meteor 메소드를 트리거하는 양식을 제출할 때 유용합니다. Meteor 메소드는 서버에서 무언가를 수행 한 다음 필요한 데이터 (보통 리다이렉트 함수로)를 리턴합니다.

그래서 당신은 템플릿 crazyStuffIsAboutToHappen에 있고 당신이를 사용합니다, 당신은 #triggerCrazyStuff의 ID를 가지고있는 링크를 클릭 한 후 유성 템플릿 theHouseThatCrazyStuffBuilt로 사용자를 리디렉션이 때 유성 방법이 doCrazyStuff라는 전화를 원한다면 다음과 같은 구조.

Template.crazyStuffIsAboutToHappen.events(
    'click #triggerCrazyStuff': (e) -> 
    e.preventDefault() # to stop the browser from hijacking the event 

    # -- error handling and pre-submit validation and yadda yadda --   

    Meteor.call('doCrazyStuff', --arguments--, (error, result) -> 
     if error 
     # handle the error + short-circuit the function. 
     return throwError(error.reason) 

     Router.go('theHouseThatCrazyBuilt, {--args--}) 
)

그리고 예, Template.TEMPLATE_NAME.events 지역은 MouseEnter처럼이 다른 모든 JS 이벤트에 대한 매우 편리하고 등등 등등.

해피 코딩!

출처

2015-03-03 09:48:36

0

이 다른 사람을 도움이 될 것입니다,하지만 난 검색 및 이에 대한 답변을 검색하고 마침내 그것을 알아 낸 경우 없음 확인 - 아이언 라우터이었다 특정 링크를 기본적으로, 때마다 내가 클릭 페이지 전체를 하드 새로 고침 (하드 다시로드, 라운드 트립).

내가 뚱뚱한 손가락을 href, 그리고 거기에 경로를 찾는 서버에 라운드 트립 (이 철기 라우터 서버 측 경로를 처리하는 방법입니다 가정합니다) 밝혀졌습니다.

기본적으로, 내가 좋아하는 루트했다 :

/item 
/items/:id

을 나는 예상대로 

/items/1234

에, 모든것이 잘 해결되면 나는 

/item/1234

에 대한 링크 지적했다.

출처

2015-12-24 22:29:28 patwhite

관련 문제

 관련 문제