Volt — это потрясающий новый веб-фреймворк Ruby, который нацелен на снижение барьера между клиентом и сервером (немного похоже на Meteor , но в Ruby). В прошлый раз мы раскрыли некоторые основы Вольт. Вы можете проверить код прямо здесь . Здесь мы будем опираться на приложение для закладок и пройдемся по управлению активами, компонентам и маршрутизации, используя метод Volt. Даже если вы не прочитали последнюю статью целиком, ее легко поймать.
Давайте начнем с простой страницы закладок, которую мы создали в прошлый раз с помощью Volt. Вот как это выглядит прямо сейчас:
Это не очень нравится моим глазам, и это немного сложно использовать. Чтобы это выглядело немного лучше, мы должны иметь возможность ссылаться на некоторые CSS.
активы
Управление активами Volt немного примитивно, и на странице с кратким описанием в этой теме отмечается, что «управление активами еще рано и, вероятно, изменится совсем немного». К счастью, мы все еще можем сделать основные вещи, которые нам нужны, например, добавить немного CSS. Прежде чем мы перейдем к этому, давайте изменим разметку, чтобы стилизация страницы была немного проще. Откройте файл config / base / index.html и измените его следующим образом:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <% javascript_files.each do |javascript_file| %> <script src="<%= javascript_file %>"></script> <% end %> <% css_files.each do |css_file| %> <link href="<%= css_file %>" media="all" rel="stylesheet" type="text/css" /> <% end %> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> </head> <body> </body> </html> Действительно, единственное, что мы добавили, это Google Web Font с этой строкой:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Это позволит нам использовать шрифт из нашего CSS, чтобы страница выглядела немного лучше. Нам нужно внести еще несколько изменений в app / main / views / main / bookmarks.html , чтобы получить доступ к элементам страницы с помощью селекторов CSS:
<:Title> Bookmarks <:Body> <form e-submit="add_bookmark" role="form"> <div class="form-group"> <label class="muted">New Bookmark</label> <div class="form-element"> <span class="input_label">Description</span><input class="form-control" type='text' value="{{ page._new_bookmark._description }}" /> </div> <div class="form-element"> <span class="input_label">URL</span><input class="form-control" type="text" value="{{ page._new_bookmark._url }}" /> <input type="submit" value="Add Bookmark" /> </div> </div> </form> <div id="bookmarks"> <h1 id="bookmark_header">Bookmarks</h1> {{ _bookmarks.each do |bookmark| }} <a class="bookmark" href="{{ bookmark._url }}">{{ bookmark._description }}</a> {{ end }} </ul> </div>
Быстрая переподготовка о содержании этого кода может быть полезной. На самом деле есть только две особенные части. Прежде всего, у нас есть форма ввода:
<input class="form-control" type="text" value="{{ page._new_bookmark._url }}" />
Здесь мы определяем привязку page._new_bookmark._url чтобы мы могли получить доступ к этому значению в контроллере и ожидать, что он будет содержать значение текстового поля. Другая важная часть — отображение закладок:
{{ _bookmarks.each do |bookmark| }} <a class="bookmark" href="{{ bookmark._url }}">{{ bookmark._description }}</a> {{ end }}
Если вы уже использовали Rails, этот тип кода не должен вызывать удивления. По сути, мы зацикливаемся на закладках, а затем создаем ссылки для каждой из них. Однако Volt делает это особенным, потому что мы на самом деле создаем привязки для bookmark._url и bookmark._description которые взяты из объекта закладки, созданного из базы данных. Хорошо, у нас работает базовый дисплей, но выглядит он довольно плохо. Давайте добавим немного CSS.
Управление активами в Volt все еще находится на ранней стадии, но если вы приехали из Rails, вы почувствуете себя здесь как дома. Активы разделены на компоненты. Прямо сейчас у нас есть только один компонент, и он называется «основным». Вольт ссылки в ваших активах для вас. На что именно она ссылается? Как отмечается в документации: «Все, что находится внутри папки asset / js или assets / css компонента, хранится в / assets / {js, css} (через Sprockets)». Volt, как и Rails, также использует Sprockets для предварительной компиляции и управлять активами.
Мы сделаем простую двухцветную (с несколькими оттенками) схему для страницы закладок. Давайте сначала приведем некоторые цвета в качестве переменных SCSS, чтобы нам не приходилось их повторять. Создайте файл app / main / assets / variables.css.scss и добавьте цвета:
$background-color: #EFECCA; $muted-color: #A7A37E; $accent-color: #046380; $muted-accent: #CDE0E5; $text-field: #FAF8E4;
У нас есть несколько CSS-директив, которые можно применять ко всему компоненту. Заполните их внутри app / main / assets / css / app.css.scss :
@import 'variables'; body { background-color: $background-color; } .header { border-bottom: 5px solid $accent-color; } .header h3 { font-family: Oswald; color: $accent-color; } .header li a, .header li:hover a { background-color: $muted-color; border-radius: 0px; color: #fff; font-weight: bold; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .header li:hover a { background-color: $accent-color; } .muted { color: $muted-color; }
Сам CSS довольно прост, так как он просто устанавливает цвета и шрифты. Однако важно то, что мы можем @import другие файлы SCSS. Если вы из Rails-land, вы можете ожидать, что app.css.scss будет конвертирован в app.css и app.css весь ваш CSS в одном месте. Однако у Volt пока нет комплектации активов, так что будьте осторожны.
У нас есть некоторые специфичные для закладок CSS, которые можно найти в app / main / assets / css / bookmarks.css.scss :
@import 'variables'; .form-group .muted { font-size: 14px; text-transform: uppercase; font-weight: normal; letter-spacing: 1px; } .form-group input[type="text"] { border: 1px solid $muted-color; border-radius: 0px; box-shadow: none; margin-bottom: 15px; background-color: $text-field; } .form-group input[type="submit"] { background-color: $accent-color; border: none; color: $muted-accent; font-size: 14px; padding: 15px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } .form-group .input_label { background-color: $accent-color; color: #fff; padding: 5px; } .form-element { margin-top: 5px; } #bookmarks { margin-top: 55px; } #bookmark_header { text-align: center; font-weight: bold; text-transform: uppercase; font-size: 20px; color: $accent-color; margin-bottom: 35px; } #bookmarks ul li { list-style-type: none; } .bookmark { background-color: $accent-color; color: #fff; padding: 15px; margin-top: 3px; display: inline-block; } .bookmark:hover { color: #fff; text-decoration: none; }
Вот как должна выглядеть наша страница: 
Помните, что просто присвоение имени файлу bookmarks.css.scss ничего не дает. Вольт включил бы его, даже если бы мы назвали его «treefrogs.css.scss». Вольт, честно говоря, не говорит о названии файла. Но, сохраняя разделение CSS, может помочь, если вы захотите разделить часть кода на другой компонент. Еще один способ подумать об этом: если вам действительно нужно, чтобы ваш CSS не запутался, вы, вероятно, должны разделиться на другой компонент. Кстати, что именно является компонентом?
Компоненты
Компоненты не только то, что вы ожидаете в вольт. Во-первых, они функционируют как способ разделить ваше приложение на маленькие кусочки. Но Volt также загружает все файлы для определенного компонента, как только вы загрузите первую страницу в компоненте. Смысл этого заключается в том, что если на вашем веб-сайте есть компонент, называемый sales , мы можем с достаточной уверенностью сказать, что, как только пользователь получит доступ к маршруту внутри компонента sales , этот пользователь, скорее всего, перейдет на другой маршрут в том же компоненте. , Итак, документация советует нам думать о компонентах как о «перезагрузке границ» в вашем приложении.
Мы можем легко сгенерировать компонент, поскольку Volt предоставляет нам простой генератор, который настроит структуру каталогов и несколько файлов.
volt generate component bookmarks
Выходные данные команды дают вам общее представление о том, что мы имеем в виду, когда говорим «Вольт компонент»:
create app/bookmarks create app/bookmarks/assets/css create app/bookmarks/assets/js create app/bookmarks/config/dependencies.rb create app/bookmarks/config/routes.rb create app/bookmarks/controllers/main_controller.rb create app/bookmarks/models create app/bookmarks/tasks create app/bookmarks/views/index/index.html
По сути, контроллеры, модели, представления и активы разделены по компонентам. Так как то, что приложение закладок имеет прямо сейчас, очень просто, нет особого смысла перемещать его в отдельный компонент. Мы просто придерживаемся основного компонента (т.е. вы можете безопасно удалить приложение / закладки ).
Мы можем разделить наше приложение по этим «компонентам», и каждый компонент имеет несколько маршрутов, связанных с ним. Хотя раньше мы видели маршруты в действии, мы не совсем поняли, как они работают в Volt.
Маршруты
Маршруты являются источником жизненной силы большинства веб-сред, потому что они говорят нам, где мы находимся в приложении в любой момент времени. Но поскольку Volt выполняет синхронизацию всех данных через веб-сокеты, URL работает несколько «вживую». Допустим, мы загружаем страницу с маршрутом «/ people / dhaivat», где «dhaivat» — это имя одного из «людей». Если в контроллере мы в конечном итоге изменим значение модели, связанное с «dhaivat», то URL-адрес изменится на клиенте! По сути, URL не контролирует состояние приложения; URL это просто способ ссылки на конкретное состояние.
Что мы можем сделать с маршрутами? Мы знаем, что мы должны установить их внутри приложения /
get '/bookmarks', _action: 'bookmarks'
Это просто отображает маршрут «/ bookmarks» в действие «bookmarks» в controllers/main_controller.rb . Оказывается, у нас могут быть привязки на маршрутах так же, как мы делаем для разметки:
get "/bookmarks/{{ _bookmark_id }}", _action: 'show_bookmark'
С этим маршрутом, если мы посетим URL «/ bookmarks / 16», params._bookmark_id будет содержать 16 . Затем мы можем изменить это значение в контроллере, и URL-адрес клиента обновится, чтобы отразить это изменение. Это, опять же, одно из мест, где Вольт пытается стереть различие между клиентом и сервером.
Завершение
Если вы исходите из традиционного опыта работы с Rails, то сначала Volt может показаться немного странным. В Volt все еще есть некоторые острые грани (например, нет объединения активов), но поскольку они продолжают таять, Volt является фантастической основой для веб-приложения, где клиентская сторона столь же (если не более) важна, чем серверная. боковая сторона. Надеемся, что эта статья поможет вам написать ваше следующее приложение на Volt.