[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> -->

如何在 Rails 中搭配 Turbolinks 使用 Vue的更多相关文章

  1. 如何在Rails中执行Get/Post/Put请求

    require 'open-uri' require 'json' require 'net/http' class CoupleController < ApplicationControll ...

  2. 如何在 Vite 中使用 Element UI + Vue 3

    在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...

  3. Vue：如何在vue-cli中创建并引入自定义组件

    一.创建并引入一个组件 1.创建组件 vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件: <t ...

  4. rails中如何在a标签中添加其他标签

    最近在用rails写一个项目练练手,然后遇到了一个问题,就是用 <% link_to("首页", root_path) %> 生成一个a标签,之后就在想我怎么在这个a标 ...

  5. 我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  6. 【转】我是如何在SQLServer中处理每天四亿三千万记录的

    原文转自:http://blog.jobbole.com/80395/ 首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文 ...

  7. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  8. 如何在SQLServer中处理每天四亿三千万记录

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  9. (转)我是如何在SQLServer中处理每天四亿三千万记录的

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

随机推荐

  1. win10 vm 11 桥接模式配置

    1 保证你Vmware里面的虚拟机是关机状态 2 在本地连接 属性中 卸载VM 桥接协议 3 管理员身份运行VM ,编辑>虚拟网络编辑器 删除所有网卡,并且重新配置网络适配器 4 配置完成后,选 ...

  2. POJ 2411 Mondriaan's Dream （状压DP，骨牌覆盖，经典）

    题意: 用一个2*1的骨牌来覆盖一个n*m的矩形,问有多少种方案?(1<=n,m<=11) 思路: 很经典的题目,如果n和m都是奇数,那么答案为0.同uva11270这道题. 只需要m个b ...

  3. 【Python图像特征的音乐序列生成】图像特征在旋律生成中有什么用

    jishude 首先援引一个资料网页:http://www.cosmosshadow.com/ml/%E5%BA%94%E7%94%A8/2016/03/01/%E9%9F%B3%E4%B9%90%E ...

  4. Caused by: java.lang.IllegalStateException: javax.websocket.server.ServerContainer not available

    java.lang.IllegalStateException: Failed to load ApplicationContext    at org.springframework.test.co ...

  5. Ubuntu18.04偏好设置

    以下只是我个人的一些偏好设置,会持续更新 一.安装中文输入法和换用中文界面 Ubuntu18.04下安装搜狗输入法 Ubuntu18.04如何从英文界面更改为中文界面 二.更改系统自带设置 1.设置- ...

  6. Python 继承实现的原理（继承顺序）

    继承顺序 Python3 : 新式类的查找顺序:广度优先 新式类的继承: class A(object): Python2 3 都是了 MRO算法--生成一个列表保存继承顺序表 不找到底部 Pytho ...

  7. 服务器上搭建flowvisor平台

    之前全是在virtualbox上的Ubuntu虚拟机上测试的ovs以及pox, 现在我们开始在服务器上开始了 两台服务器上的ovs均是1.4.6版本 遇到一个问题:之前装的ovs down了 然后什么 ...

  8. 从屏幕截取一块区域，将其赋给imageView

    UIGraphicsBeginImageContext(self.bounds.size); [self.layerrenderInContext:UIGraphicsGetCurrentContex ...

  9. 【转】EM算法原理

    EM是我一直想深入学习的算法之一,第一次听说是在NLP课中的HMM那一节,为了解决HMM的参数估计问题,使用了EM算法.在之后的MT中的词对齐中也用到了.在Mitchell的书中也提到EM可以用于贝叶 ...

  10. 【bitset 技巧 分块】bzoj5087: polycomp

    神仙zq发现了${n^2\sqrt n}\over 32$做法 Description 你有三个系数为0,1的多项式f(x),g(x),h(x) 求f(g(x)) mod h(x) 为方便起见,将答案 ...