Недавно я должен был разработать компонент, который позволил бы пользователям писать цитаты и рабочие заказы внутри нашего CRM. Компонент должен был включить следующие функции:
- Возможность ввести описание, количество, цену и налоговую ставку Числа должны быть отформатированы красиво с тысячами и дебилическими сепараторами и символом валюты
- Всего итоги каждой колонки и таблицы должны быть вычислены автоматически
- Общая сумма налога должна отображаться автоматически в конце
- Скорость доставки автоматически добавляется в общую сумму и рассчитывается как «GrandTotal»
- пользователь, очевидно, должен быть в состоянии добавить и удалить строки
- Способность переупорядочить строки
Обычно я бы создал приятный вид HTML-таблица со всеми необходимыми столбцами в заголовке, затем перемещается в корпус, чтобы сделать первые (семенные) пустые входные поля, возможно, с одним или двумя выборами. Затем я бы создал несколько кнопок для действий (добавление и удаление строк), а затем добавить нижний колонтитул, что будет иметь некоторые итоги и способности вводить скорость доставки и т. Д.
Давайте сломаем некоторые шаги, необходимые для этого в jQuery:
Шаг 1: Мне пришлось создавать прослушиватели событий KeyDown на входах, чтобы сделать весь стол отзывчиваться на человека.
Шаг 2: Программирование расчетов. Я в основном вытащил некоторые числа из DOM, анализировал их плавать, сделал немного математики и обновил некоторые другие значения в DOM, чтобы отразить изменение, а затем установить пустые поплавки, чтобы вернуть 0s вместо назы. Будьте осторожны, когда вы прикрепляете события к вновь созданным строкам после вставки.
Примечание: Мне пришлось решить погоду, чтобы использовать underscore.js для шаблона или использовать первую строку как «ряд семян», которая означала, что я всегда должен был скопировать первую строку DOM в новых местах и не забывайте опустошить все входы, прежде чем пользователи могут видеть новые строки быть вставленным.
Хотя это звучит как любой другой обычный день в офисе (или в моем случае в гостиной), я знал, что были лучшие способы подойти к этому. Глубоко внутри, я чувствовал немного раздражение вручную манипулирование DOM, нормализующим и расчетным данными, когда все, что мне нужно было сделать, было манипулировать данными (или моделью) и просмотра. Таким образом, данные будут обновляться соответственно, учитывая, что у него достаточно информации.
Как вы можете видеть из описания, есть много нормирования DOM и нормализации Fortting и Data – внешняя библиотека, такая как автонамерная или учетная запись.
Поскольку, в то время я уже хотел изучить Angular.js и искал проблему, чтобы решить с Angular.js, я подумал, – почему, черт возьми, не так!: Я начал читать о угловах, но хотела что-то более легкое Помогите мне повесить это. Это было, когда я смотрел в Vue.js и увидел отличный учебник Laravel + Vue.js на Ларакастах. Это было, когда я решил дать Vue.js попробую!
Я позволю вам увидеть конечный результат здесь: кодепен
Подсказка: Посмотрите, как вы можете просто добавить и удалить строки, просто добавив или удалив строки из модели.
Вы можете увидеть, насколько легко прикрепить события, которые применяются к каждой новой строке, как вы добавляете их динамически.
Надеюсь, вам понравился мой первый блог.
Оставайся крутым, но будь теплым. Счастливое кодирование!
Этот учебник был первоначально опубликован автором здесь Отказ Эта версия была отредактирована для ясности и может появиться отличаться от исходного поста.