如何在Rails6內通過Webpacker使用JavaScript; flatpicker日期時間組件選擇器

如何在Rails6內通過Webpacker使用JavaScript;  

Rails6默認不再使用asset pipeline，改用Webpacker。

文件結構變化：

• 配置文件: webpacker.yml
• package.json查看安裝的js庫，可以使用yarn命令或者npm
• app/assets/javascript不會再generate。
• app/javascript/packs/application.js：packs文件夾管理獨立安裝的包。

 下圖是默認生成的文件夾。包含了rails UJS庫， turbolinks, atcivestorage, channels

添加了channels文件夾。

 

如何安裝一個packer：

# 例如
rails webpacker:install:stimulus

Appending Stimulus setup code to /Users/.../tailwindapp/app/javascript/packs/application.js
      append app/javascript/packs/application.js
# 增加了一行代碼import "controllers"

Creating controllers directory
      create  app/javascript/controllers
      create  app/javascript/controllers/hello_controller.js
      create  app/javascript/controllers/index.js
Installing all Stimulus dependencies
         run  yarn add stimulus from "."
#安裝依賴包，可以在yarn.lock中看到詳細說明

 

 

使用Flatpickr

一個輕量化的datetime picker。

包括使用JS和CSS

https://flatpickr.js.org/

安裝：

# using npm install
npm i flatpickr --save

# 其他
yarn add flatpickr

#cdn也可以

use

推薦直接使用元素，或者選擇器：

// If using flatpickr in a framework, its recommended to pass the element directly
flatpickr(element, {});

// Otherwise, selectors are also supported
flatpickr("#myID", {}); // creates multiple instances flatpickr(".anotherSelector");

 

Rails中的使用

1. 生成一個Post

  下面的命令仍然會生成assetpipeline的文件： stylesheets/scaffolds.scss,如果不使用就刪除掉。

rails g scaffold Post title publish_date:date

2. yarn add flatpickr

javascript/packs/application.js內添加：

import flatpickr from "flatpickr";
#只使用flatpickr的CSS樣式
require("flatpickr/dist/flatpickr.css")
#或者使用不同的樣式主題
#require("flatpickr/dist/themes/light.css")

document.addEventListener("turbolinks:load", () => {
  flatpickr("[data-behavior='flatpickr']", {
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d"
  })
})

在application.html.erb添加：(使用webPacker CSS)

<%= stylesheet_pack_tag 'application', media: "all", ...%>

在對應的視圖文件內添加：

<div>
  <%= form.text_field :publish_date, data: {behavior: 'flatpickr'}%>
</div>

#生成<input data-behavior="flatpickr" type="hidden" name="post[publish_date]" id="post_publish_date" class="flatpickr-input">