【免費(fèi)下載鏈接】hotwire-railsUse Hotwire in your Ruby on Rails app項(xiàng)目地址https://gitcode.com/gh_mirrors/ho/hotwire-rails點(diǎn)擊查看免費(fèi)下載hotwire-rails 是 Ruby on Rails 生態(tài)中用于聚合 Hotwire 兩大核心組件 Turbo 與 Stimulus 的 gem讓你無(wú)需編寫大量 JavaScript就能讓傳統(tǒng) Rails 應(yīng)用擁有接近單頁(yè)應(yīng)用SPA的流暢體驗(yàn)。本文面向新手完整講解 Turbo Frames、Turbo Streams 與 Stimulus 控制器的安裝與用法。1分鐘看懂 hotwire-rails 是干什么的 Hotwire 的理念是“HTML over the wire”HTML 走網(wǎng)線服務(wù)器發(fā)送 HTML 片段瀏覽器做最小化局部更新。它由兩部分組成Turbo由turbo-rails提供接管頁(yè)面跳轉(zhuǎn)、表單提交實(shí)現(xiàn)局部刷新Stimulus由stimulus-rails提供輕量的 JavaScript 框架用數(shù)據(jù)屬性把行為掛到 HTML 元素上hotwire-rails本身的作用是“打包”這兩個(gè) gem入口文件 lib/hotwire-rails.rb 會(huì)同時(shí)引入turbo-rails與stimulus-railshotwire-rails.gemspec 中聲明了這三項(xiàng)依賴外加rails 6.0.0。?? 注意官方認(rèn)為“聚合依賴”價(jià)值有限該 gem 已標(biāo)記Deprecated見(jiàn) README.md。新項(xiàng)目建議直接引入turbo-rails和stimulus-rails功能完全一致本文用法同樣適用。快速安裝3 步跑通 Hotwire第 1 步聲明依賴在 Gemfile 中加入gem hotwire-rails第 2 步安裝 gembundle install第 3 步執(zhí)行安裝命令rails generate hotwire:install該任務(wù)定義在 lib/tasks/hotwire_tasks.rake 中內(nèi)部串聯(lián)了stimulus:install與turbo:install會(huì)自動(dòng)完成 JS 資源、視圖 helper 等全部引入。若使用較新的獨(dú)立安裝方式則分別運(yùn)行rails generate turbo:install和rails generate stimulus:install即可。Turbo Frames局部刷新頁(yè)面不再整頁(yè)重載Turbo Frame 允許把頁(yè)面的一部分包進(jìn)turbo-frame容器導(dǎo)航或刷新時(shí)只重載 frame 內(nèi)的內(nèi)容。1. 在視圖中用 frame 包裹局部?jī)?nèi)容% turbo_frame_tag cart do % % render partials/cart % % end %2. 服務(wù)器只返回該 frame 對(duì)應(yīng)的片段當(dāng)請(qǐng)求指向#cart時(shí)Rails 只需返回對(duì)應(yīng)局部模板的 HTMLTurbo 會(huì)自動(dòng)替換到正確位置。典型使用場(chǎng)景側(cè)邊欄購(gòu)物車只有購(gòu)物車區(qū)域刷新頁(yè)面狀態(tài)滾動(dòng)位置、焦點(diǎn)完整保留分頁(yè)列表翻頁(yè)只更新列表區(qū)域同頁(yè)多端適配移動(dòng)端與桌面端加載不同局部?jī)?nèi)容核心優(yōu)勢(shì)一行 JavaScript 都不用寫。Turbo Streams服務(wù)器推送“補(bǔ)丁”頁(yè)面實(shí)時(shí)更新 Turbo Streams 相當(dāng)于 HTML 的“遠(yuǎn)程補(bǔ)丁”服務(wù)器返回一系列turbo-stream指令瀏覽器執(zhí)行后精準(zhǔn)更新對(duì)應(yīng)元素。支持 5 種操作操作效果append追加到末尾prepend插入到開頭replace整體替換元素update更新元素內(nèi)部 HTMLremove刪除元素1. 控制器中返回 stream 響應(yīng)def publish article Article.find(params[:id]) article.publish! render turbo_stream: [ turbo_stream.append(articles, partial: articles/article, locals: { article: article }) ] end2. 用 ActionCable 實(shí)時(shí)廣播給所有用戶def show article Article.find(params[:id]) stream_from article end只要某個(gè)用戶觸發(fā)了turbo_stream渲染所有訂閱了同一頻道、打開同一頁(yè)面的用戶都會(huì)收到并應(yīng)用這塊“補(bǔ)丁”——這正是實(shí)時(shí)評(píng)論區(qū)、實(shí)時(shí)排行榜的實(shí)現(xiàn)原理。Stimulus給 HTML 加上“剛剛好”的 JavaScriptStimulus 用數(shù)據(jù)屬性把行為綁定到元素上避免龐大的app.js。1. 生成控制器rails generate stimulus:controller hello2. 控制器代碼自動(dòng)生成于app/javascript/controllers/hello_controller.jsimport { Controller } from hotwired/stimulus export default class extends Controller { connect() { console.log(this.element.dataset.name) } }3. 在 HTML 中聲明div>贊分享【免費(fèi)下載鏈接】hotwire-railsUse Hotwire in your Ruby on Rails app項(xiàng)目地址https://gitcode.com/gh_mirrors/ho/hotwire-rails點(diǎn)擊查看免費(fèi)下載相關(guān)推薦從 Hotwire / Turbo 遷移到 htmxTurbo Drive、Turbo Frames、Turbo Streams 與 Stimulus 的等價(jià)實(shí)現(xiàn)指南從 Hotwire / Turbo 遷移到 htmxTurbo Drive、Turbo Frames、Turbo Streams 與 Stimulus 的等價(jià)前端Web框架Claude Code 反饋記憶保存指南何時(shí)記錄用戶糾正與確認(rèn)讓 Agent 在后續(xù)對(duì)話中保持一致Claude Code 反饋記憶保存指南何時(shí)記錄用戶糾正與確認(rèn)讓 Agent 在后續(xù)對(duì)話中保持一致 本文圍繞 Claude Code 系統(tǒng)提示中的反饋記憶NixOS fileSystems 選項(xiàng)詳解從聲明式掛載配置到 fstab 生成與啟動(dòng)期掛載NixOS fileSystems 選項(xiàng)詳解從聲明式掛載配置到 fstab 生成與啟動(dòng)期掛載 在 NixOS 中所有文件系統(tǒng)掛載都通過(guò)聲明式的 fileSy上一篇LiteGraph.js CI/CD流程優(yōu)化測(cè)試與部署加速下一篇B站視頻下載終極教程三分鐘掌握BiliTools嗶哩嗶哩工具箱創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考