Как создать модульные элементы интерфейса (компоненты) в приложении Rails? - PullRequest
Новая
       27

Как создать модульные элементы интерфейса (компоненты) в приложении Rails?

0 голосов
/ 24 октября 2019

Давайте предположим, что нам нужно создать простой UI-компонент для нашего приложения Rails, например header. Мы начнем с создания нескольких файлов:

1) app/views/partials/_header.erb

2) app/assets/stylesheets/_header.scss

3) app/assets/javascript/_header.js

и послечто нам нужно включить их в надлежащие виды или файлы манифеста.

Вопрос:

Существует ли простой способ переместить эти файлы в одну папку? Например: 

app
|-- ui_components
|   |-- header
|   |   |-- view.erb
|   |   |-- style.scss
|   |   |-- script.js

И, в случае .scss, включить их в app/assets/stylesheets/application.scss, выполнив: 

@import "ui_components/header/style"
@import "ui_components/footer/style"
...

То же самое для .js.

Спасибо.

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Просмотр поддержки компонентов, а комплектация активов по-прежнему ограничена.

Мне удалось заставить его работать с ячейками Gem 

gem "cells-rails"

Ячейка Gem позволяет вам поместить компоненты вида в app/cells, см. http://trailblazer.to/gems/cells/

В вашем application.rb вам нужно 

def self.cells_with_assets
  all_cell_file_names = Dir.glob("app/cells/**/*.rb")
  all_cell_file_names.map do |f|
    f.match(/app\/cells\/([a-z_\/]*)\.rb/)[1].classify
  end
end    

config.cells.with_assets = Application.cells_with_assets

Чтобы он работал с SCSS, вам также нужно сделатьКонечно, файлы оттуда включены, поэтому в вашем application.scss do: 

/* Include all SCSS Files in the cells directory
*= require_tree ../../cells
*/

Конечно, я бы порекомендовал использовать ActionView::Component сейчас, так как теперь это части ядра рельсов, начиная с 5. х (не уверен).

https://github.com/github/actionview-component

0 голосов
/ 24 октября 2019

Концепция объединения css, html и js часто используется в таких средах javascript, как vuejs, где три «языка» могут быть включены в «один-компонент-файл».

Я понимаю,что это не совсем то, что вы спрашиваете, но, поскольку вы выразили желание объединить css / html / js, вы можете рассмотреть возможность использования отдельных файловых компонентов vuejs. Они в высшей степени пригодны для повторного использования во всем приложении и имеют собственный стиль и поведение.

...