Как заменить jQuery на Vue.js в программах Ruby on Rails

1656612250 kak zamenit jquery na vuejs v programmah ruby on rails

Игорь Петров

qXo0QfSW2yLfxIH9mg7vF66TxfbmrExA-5aO

Если вы а Ruby on Rails разработчиком и уже несколько лет, вы, вероятно, привыкли использовать jQuery в качестве параметра по умолчанию для разработки интерфейса. Несколько версий назад, ядро Рельсы разработчики предложили его как стандарт и со временем он стал стандартом. jQuery был №1 JavaScript библиотеки и ею было очень удобно пользоваться.

С тех пор прошло немало времени, но jQuery все еще опция по умолчанию. Теперь, однако, вам нужно что-то другое из-за растущей сложности клиентского кода. Вы можете попробовать React, Angular.js или Vue.js, но вы можете легко использовать только один из них, прилагая наименьшие усилия, чтобы интегрировать его в существующую или новую программу.

я использовал jQuery давно и вошло в привычку: если начинаешь новое Рельсы приложение, jQuery уже есть. Вы уже знакомы с ним, потому сразу начинаете им пользоваться.

Несколько лет назад я обнаружил, что мне нравится угловой 1, потому что начать было очень просто. Но он все еще имел лишнюю настройку по инициализации программы, записи контролеров и вводу зависимостей.

Это отлично подходит для архитектуры вашей программы с помощью подхода MVC (MVVM).

Но допустим, у вас есть программа с большим количеством jQuery код манипуляции DOM, и вы хотите начать заменять этот беспорядок на что-то более поддерживаемое. Что-то вроде следующего (что можно было бы оптимизировать, конечно, но это для примера):

$(document).ready(function(){
   ...   $('#some-radio-button1').on('click', function(){     if ($(this).is(':checked')) {       // removing "active" classes, hiding some blocks       // showing related block
     } else {
       // opposite of above     }   });
});

Почему Vue.js?

Так почему я рекомендую заменить jQuery код из Vue.js? Поскольку Vue.js полезно не только для написания комплекса JavaScript программы. Вы можете использовать его только для одной простой задачи, например, для манипуляции с DOM. Если это все, что вам нужно, было бы хорошей идеей пойти с этим Vue. И вы можете пойти дальше, если вам нужно решить более сложные задачи, такие как маршрутизация, управление состоянием и т.д.

Итак, если у вас уже есть проект с большим количеством jQuery кода, и вы хотели бы избавиться от этих беспорядочных обработчиков событий, вам обязательно следует предоставить Vue.js попытка.

Начинаем

Если вы разработчик RoR старой школы и все еще управляете активами с помощью Звездочкизатем просто загрузите и поставьте vue.js твоему vendor/assets/javascripts папку.

Далее требуйте его от основного JavaScript файл манифеста (например, application.js ):

//= require jquery//= require jquery_ujs//= require bootstrap//= require vue

Затем вам нужно создать экземпляр a Vue экземпляра и присоедините его к какому-либо элементу в вашем HTML код. Для этого можно создать отдельную vue_app.js (или .coffee) файл внутри app/assets/javascripts:

window.vueApp = new Vue  el: '.off-canvas-container'  data:    ...

Вот и все, теперь можно использовать Vue.js!

Идя дальше

Теперь вы можете добавить данные в свой Vue экземпляр data раздел и напишите некоторые обработчики в methods См. раздел. Но лучше использовать сердцевину Vue.js единица: компоненты.

Самый простой способ продлить Vue.js заключается в использовании имеющихся Рельсы просмотров и завернуть некоторые кусочки HTML на компоненты. Давайте посмотрим, как этого добиться.

У меня, например, есть app/views/sellers/print_labels/new.html.erb и некоторые jQuery код, связанный с этой страницей:

oby6k46mOkZzmsrhymr5Z3AMPwop2tCmKNiW
YDQsGEOpcQdAEpWCJQaJVPWKjkzUQbbwKCFx

Это форма адреса доставки, ввод которого отключен по умолчанию. После того, как пользователь щелкнет значок «карандаш», поля формы преобразуются в доступные вводы и появится кнопка «Сохранить». После нажатия кнопки «Сохранить» форма возвращается в исходное состояние.

Чтобы заменить это jQuery код с простым Vue.js компоненты, я создаю app/assets/javascripts/components/print_labels.coffee с чем-то вроде приведенного ниже (но не забудьте требовать ваш components папка из application.js):

Vue.component 'print-labels',  data: ->    isEditingAddress: false

А потом я использую его в своем Рельсы просмотреть:

83yq -- rKhJDGBRFhsqy8LHTbZ3G2FRrG3Zcp

На что следует обратить внимание:

  • Если вы хотите сохранить шаблон компонента в представлениях Rails или частичных, вам следует использовать файл inline-template вариант.
  • v-cloak параметр необходим для отображения компонента после его инициализации и визуализации
  • Мы используем @click для прикрепления onclick обработчики событий (вы можете извлечь сложный код к компоненту methods)

Теперь мы можем избавиться jQuery код, потому что мы заменили его на маленький Vue.js компонент (с одной переменной данных!).

Теперь твоя очередь! Продолжайте этот подход, и я надеюсь, что вы будете удовлетворены Vue.js скоро.

Если вам понравился этот пост, нажмите, пожалуйста чтобы распространить информацию.

Добавить комментарий

Ваш адрес email не будет опубликован.