如何在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">

  

 

posted @ 2019-04-18 11:28  Mr-chen  阅读(1157)  评论(0编辑  收藏  举报