如何在 Rails 中搭配 Turbolinks 使用 Vue
2017-08-09 23:04
176 查看
[Rails] Vue-outlet for Turbolinks
在踩了 Rails + Turbolinks + Vue 的許多坑後,整理 的作法並和大家分享。Initialize the App
# initialize the app rails new rails_sandbox_vue --database=postgresql --webpack=vue # install package bundle yarn
Scaffold the app
# Scaffold the app bin/rails g scaffold User name email # Create database and migrate bin/rails db:setup bin/rails db:migrate
Create Vue Component
在./app/javascript/packs/中建立 vue component
hello_turbolinks.vue
<!-- ./app/javascript/packs/hello_turbolinks.vue --> <template> <div> <h4>{{ message }}</h4> <ul> <li>Object: {{ obj }} </li> <li>Number: {{ num }} </li> <li>Array: {{ arr }} </li> <li>String: {{ str }} </li> </ul> </div> </template> <script> export default { props: ['obj', 'arr', 'num', 'str'], data: function () { return { message: 'Hello, Vue and Turbolinks' } } } </script> <style scoped> p { font-size: 2em; text-align: center; } </style>
Create Vue Adapter
建立vue_adapter.js,在 import Vue 的地方要載入
vue.esm.js可以 compile template 的版本。另外要把需要使用到的 Vue Component 在這裡執行註冊:
// ./app/javascript/packs/vue_adapter.js import Vue from 'vue/dist/vue.esm.js' import HelloTurbolinks from './hello_turbolinks' /** * Register components */ Vue.component('hello-turbolinks', HelloTurbolinks) function VueConstructor () { let outlets = document.querySelectorAll('www.rcsx.org [data-vue-components-outlet]') outlets.forEach(function (outlet, index) { let id = outlet.getAttribute('data-vue-components-outlet') new Vue({ el: '[data-vue-components-outlet=' + id + ']' }) }) } document.addEventListener('turbolinks:load', function () { VueConstructor() })
Notice:
-記得 import 的 Vue 要匯入的是 vue.esm.js
-記得註冊要使用的 Vue Component
add vue_adapter in head
在 layouts/application.html.erb 中的head中加入
<%= javascript_pack_tag 'vue_adapter', 'data-turbolinks-track': 'reload' %>:
<!-- ./app/views/layouts/application.html.erb --> <!DOCTYPE html> <html> <head> <title>RailsSandboxVue</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'vue_adapter', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html>
Notice: 記得要把 javascript_pack_tag 放在 head 當中
Import Vue component in template
我們把 Vue 的組件載入 index.html.erb 中,data-vue-components-outlet這個屬性是關鍵字,後面放要載入的 Vue 組件名稱:
<!-- ./app/views/users/index.html.erb --> <!-- 以上省略 --> <% @hello_message = {num: 1, str: '2', arr: [1, 2, 3], obj: {name: 'foo', age: 12}} %> <!-- Import Vue Component --> <div data-vue-components-outlet="hello-turbolinks"> <hello-turbolinks :obj="<%= @hello_message[:obj].to_json %>" :arr="<%= @hello_message[:arr] %>" :str="<%= @hello_message[:str] %>" :num="<%= @hello_message[:num] %>" ></hello-turbolinks> </div> <!-- End of Import Vue Component --> <%= link_to 'New User', new_user_path %>
完成
分別開兩個 terminal 到 app 目錄底下,分別執行:bin/webpack-dev-server bin/rails s
就可以看到 Vue Component 正確運作了。
加入 View Helper
我們也可以寫一個 Rails View Helper 來方便我們使用 Vue 組件:在
./app/helpers/中建立一支
vue_helper.rb:
# ./app/helpers/vue_helper.rb module VueHelper def vue_outlet(html_options = {}) html_options = html_options.reverse_merge(data: {}) html_options[:data].tap do |data| data[:vue_components_outlet] = "_v" + SecureRandom.hex(5) end html_tag = html_options[:tag] || :div html_options.except!(:tag) content_tag(html_tag, '', html_options) do yield end end end
使用方式如下:
<!-- ./app/views/users/index.html.erb --> <% @hello_message = {num: 1, str: '2', arr: [1, 2, 3], obj: {name: 'foo', age: 12}} %> <!-- Import Vue Component by Helper --> <%= vue_outlet do %> <hello-turbolinks :obj="<%= @hello_message[:obj].to_json %>" :arr="<%= @hello_message[:arr] %>" :str="<%= @hello_message[:str] %>" :num="<%= @hello_message[:num] %>" > <% end %> <!-- End of Import Vue Component by Helper -->
如果需要 tag 不想要使用 div 可以加上 options:
<!-- ./app/views/users/index.html.erb --> <!-- With <p> --> <%= vue_outlet tag: 'p' do %> <hello-turbolinks :obj="<%= @hello_message[:obj].to_json %>" :arr="<%= @hello_message[:arr] %>" :str="<%= @hello_message[:str] %>" :num="<%= @hello_message[:num] %>" > <% end %> <!-- End of With <p> -->
相关文章推荐
- 如何讓 UserControl 與 RequireFieldValidator 搭配使用
- Rails2.0中如何使用jQuery的post方法?
- mybatis的环境搭建及如何和搭配spring使用
- 如何在rails项目中使用grunt
- 基于rails的schedule网站开发(3):如何使用MySql开发(?)
- 如何在 Rails 中使用 Webpack
- 没有Rails Java程序员如何使用Ruby
- 如何使用ODBC搭配dsn链接数据库
- 如何使用Vuex+Vue.js构建单页应用
- 如何优雅的使用vue+vux开发app -02
- TabLayout和ViewPager搭配使用中如何设置Tab背景颜色(无须自定义TabLayout)
- 如何使用vue-cli生成项目
- 如何方便的在Rails中使用Octicons符号字符
- 如何使用 Rails 和七牛云存储,在 15 分钟内打造一个图片分享社交应用原型
- rails中开启了csrf防御如何使用jquery的ajax请求
- Flask MVVM 开发(vue.js) - ajax如何同步更新地址栏history 以及使用浏览器返回按钮
- 如何在Ruby On Rails中使用Unicode(解决数据库中文化的问题)
- 如何优雅的使用vue+vux开发app -01
- 如何在rails中正确使用MS Sql Server 2000做为数据库服务器(zz)
- Rails 中如何使用全局变量?