Turbolinks 入門

WEB GENERATOR GAME DEVELOPER 襟儘䓛⛳ @elct9620

技術原理 Turbolinks API 效果展示 Turbolinks 入門

Turbolinks 是基於 HTML5 的 History API 所實現的技術。技術原理

在過去 History API 只用於切換上一頁或者下一頁。技術原理

Turbolinks API history.back(); history.forward(); 原始的 History API

HTML5 新增的 pushState 功能則讓我們可以對瀏覽紀錄進行操作。技術原理

技術原理

技術原理 var newState = { pageName: 'New Page', controller: 'acticle',
id: '1' }; window.history.push( newState, newState.pageName, "/article/1");

技術原理

另外還有 popState 跟 history.state 可以讓我們存取和捕捉目前的狀態。技術原理

Turbolinks 是受到 PJAX 技術的影響產生的產物。技術原理

技術原理

很多時候我們在使用 Rails 會把 Turbolinks 關閉，因為跟 JavaScript 常常出現衝突。不過這只是因為沒有了解 Turbolinks
的使用方式而已。 Turbolinks API

Turbolinks API <a href="https://google.com" data-turbolinks=“false"> Google </a> 取消 Turbolinks 效果

Turbolinks API <script data-turbolinks-eval=“false" src="// cdn.example.js/pixel.js"></script> 限制 JavaScript 重複執行

Turbolinks API <link href="/assets/style-201611041620.css" data- turbolinks-track="reload" rel="stylesheet"/> 追蹤 Assets 更新並且重新載入

Turbolinks API <meta name="turbolinks-root" content="/app"> 限定 Turbolinks 生效範圍

Turbolinks API <meta name="turbolinks-cache-control" content="no- cache"> 取消頁面快取

Turbolinks API <div id="shared" data-turbolinks-permanent>1 items</ div> 跨頁面共享元素

Turbolinks API .turbolinks-progress-bar { height: 5px; background-color: green; } 顯示進度條

雖然透過屬性的設定可以做到不少調整，但是與 JavaScript 搭配的時候，還是需要能夠相互搭配才行。 Turbolinks API

Turbolinks API $(document).ready(function() { // OnLoad... }); 大多數時候我們會在 jQuery 的
ready() 做處理

Turbolinks API $(document).on("turbolinks:load, function(){ // OnLoad... }); 不過在 Turbolinks 要改用
Turbolinks 的 load 事件

jQuery.ready => 頁面讀取觸發 Turbolinks:load => 替換頁面時觸發 Turbolinks API

Turbolinks API Turbolinks.visit('/edit/1'); 觸發 Turbolinks 換頁

Turbolinks API Turbolinks.visit('/edit/1', {action: 'replace'}); 用 replaceState 方式換頁

Turbolinks API Turbolinks.clearCache(); 清除快取

Pinterest 效果 DEMO 時間

More Decks by 蒼時弦や