Ruby on Rails => 터보 링크

소개

Turbolinks는 웹 응용 프로그램을 더 빨리 탐색 할 수있는 자바 스크립트 라이브러리입니다. 링크를 클릭하면 Turbolinks는 전체 페이지로드 비용을 들이지 않고 페이지를 자동으로 가져 와서 <body>에서 스왑하고 <head>를 병합합니다.

비고

레일 개발자로서 개발 중에 터보 링크로 최소한의 상호 작용을 할 것입니다. 그러나, 찾기 힘든 버그의 원인이 될 수 있기 때문에 친숙한 중요한 라이브러리입니다.

주요 테이크 아웃 :

turbolinks:load 바인딩 turbolinks:load document.ready 이벤트 대신 turbolinks:load 이벤트
data-turbolinks-false 속성을 사용하여 링크별로 터보 링크 기능을 비활성화하십시오.
data-turbolinks-permanent 속성을 사용하여 페이지로드 전체의 요소를 유지하고 캐시 관련 버그를 방지합니다.

터보 링크의 심층적 인 치료를 원하시면 공식 github 저장소를 방문하십시오.

이 문서의 많은 부분에 대한 크레딧은 github 저장소의 터보 링크 설명서를 초안 한 사람들에게 돌아갑니다.

터보 링크의 페이지로드 개념에 바인딩

터보 링크를 사용하는 전통적인 접근법은 다음과 같습니다.

$(document).ready(function() {
  // awesome code
});

작동하지 않습니다. 터보 링크를 사용하는 동안 $(document).ready() 이벤트는 초기 페이지로드시에만 한 번만 실행됩니다. 이 시점부터 사용자가 웹 사이트의 링크를 클릭 할 때마다 터보 링크가 링크 클릭 이벤트를 가로 채고 <body> 태그를 대체하고 <head> 태그를 병합하라는 ajax 요청을합니다. 전체 과정은 터보 링크 토지에서의 "방문"이라는 개념을 촉발시킵니다. 따라서 위의 전통적인 document.ready() 구문을 사용하는 대신 turbolink의 방문 이벤트에 바인딩해야합니다.

// pure js
document.addEventListener("turbolinks:load", function() {
  // awesome code
});

// jQuery
$(document).on('turbolinks:load', function() {
  // your code
});

특정 링크에서 터보 링크 사용 중지

특정 링크에서 터보 링크를 비활성화하는 것은 매우 쉽습니다. 공식 turbolinks 문서 에 따르면 :

터보 링크는 링크 또는 해당 조상에 data-turbolinks = "false"라는 주석을 달아 링크별로 사용 중지 할 수 있습니다.

예 :

// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>

// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/">I'm also disabled</a>
</div>

// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>

응용 프로그램 방문 이해

응용 프로그램 방문은 Turbolinks가 활성화 된 링크를 클릭하거나 프로그래밍 방식으로

Turbolinks.visit(location)

기본적으로 방문 기능은 '진행'작업을 사용합니다. 보다 명확하게, 방문 함수의 기본 동작은 "위치"매개 변수로 표시된 페이지로 이동하는 것입니다. 페이지를 방문 할 때마다 turbolink는 history.pushState 사용하여 브라우저의 기록에 새 항목을 푸시합니다. 터보 링크는 가능할 때마다 캐시에서 페이지를로드하기 위해 기록을 사용하려고하므로 기록이 중요합니다. 이렇게하면 자주 방문하는 페이지에 대해 매우 빠른 페이지 렌더링이 가능합니다.

그러나 히스토리를 스택에 밀어 넣지 않고 위치를 방문하려면 다음과 같이 visit 함수에서 'replace'액션을 사용할 수 있습니다.

// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>

// programatically
Turbolinks.visit("/edit", { action: "replace" })

그러면 스택의 총 항목 수가 변경되지 않도록 기록 스택의 맨 위가 새 페이지로 바뀝니다.

또한 사용자가 브라우저에서 앞으로 단추 나 뒤로 단추를 클릭하여 발생하는 방문을 복원 하는 데 도움이되는 "복원"작업이 있습니다. 터보 링크는 이러한 유형의 이벤트를 내부적으로 처리하고 사용자가 수동으로 기본 동작을 변경하지 않도록 권장합니다.

시작하기 전에 방문 취소하기

Turbolinks는 방문 발생을 막는데 사용할 수있는 이벤트 리스너를 제공합니다. turbolinks:before-visit 이벤트를 듣고 방문이 곧 시작될 때 알려줍니다.

이벤트 처리기에서 다음을 사용할 수 있습니다.

// pure javascript
event.data.url

또는

// jQuery
$event.originalEvent.data.url

방문 위치를 검색합니다. 다음 방문을 취소 할 수 있습니다 :

event.preventDefault()

노트:

공식 turbolinks 워드 프로세서 에 따르면 :

복원 방문은 취소 될 수 없으며 방문 전 터보 링크를 발사하지 않습니다.

페이지로드 전체에서 요소 유지

다음 상황을 고려하십시오. 사용자가 다른 사용자와 친구가되고 터보 링크를 사용하여 페이지를 더 빨리로드 할 수있는 소셜 미디어 웹 사이트의 개발자라고 상상해보십시오. 사이트의 모든 페이지 오른쪽 상단에는 사용자가 현재 보유하고있는 친구의 수를 나타내는 숫자가 있습니다. 귀하의 사이트를 사용하고 있고 3 명의 친구가 있다고 상상해보십시오. 새 친구가 추가 될 때마다 친구 카운터를 업데이트하는 자바 스크립트가 실행됩니다. 새 친구를 추가했고 자바 스크립트가 제대로 실행되었다고 상상해보십시오. 이제 페이지의 오른쪽 상단에있는 친구 수를 업데이트하여 4를 렌더링하십시오. 이제 브라우저의 뒤로 버튼을 클릭했다고 가정 해보십시오. 페이지가로드되면 친구가 4 명인 경우에도 친구 카운터에 3이라고 표시됩니다.

이것은 비교적 일반적인 문제이며 터보 링크가 해결책을 제공 한 문제입니다. 문제가 발생하는 이유는 터보 링크가 사용자가 뒤로 버튼을 클릭 할 때 캐시에서 페이지를 자동으로로드하기 때문입니다. 캐시 된 페이지가 항상 데이터베이스로 갱신되지는 않습니다.

이 문제를 해결하려면 "friend-count"라는 ID를 가진 <div> 태그 안에 친구 수를 렌더링한다고 상상해보십시오.

<div id="friend-count" data-turbolinks-permanent>3 friends</div>

data-turbolinks-permanent 속성을 추가하면 터보 링크가 페이지로드 전체에서 특정 요소를 유지하도록합니다. 공식 문서는 다음과 같이 말합니다 .

HTML ID를 부여하고 데이터 터보 링크로 영구 주석을 추가하여 영구 요소를 지정하십시오. 각 렌더링 전에 터보 링크는 모든 영구 요소를 ID로 일치시키고 원래 페이지에서 새 페이지로 전송하여 데이터 및 이벤트 리스너를 보존합니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

Ruby on Rails
터보 링크

수색…

소개

비고