Vue вместо jquery на примере кинозала?

Question

[kot2566]

Не знаком с vue, немного знаком с jquery
Пусть дана задача с выбором мест в кинозале (театре). Дана схема зала и нужно формировать итоговую сумму исходя из выбранных мест.
На jquery я бы поставил обработчики кликов и внутри них менял бы все нужные объекты и блоки вручную. Но это много кода и шансов ошибиться.
Может ли vue дать за счет реактивности преимущество?
Как реализовать правильно решение этой задачи? Ведь там также придеться ставить обработчики кликов.

Comments

[Dima Polos]

Планируется расширение функционала или только эта задача и всё?

[0xD34F]

На jquery я бы...

Попробуйте без "бы" - покажите набросок решения. А то "поставил обработчики кликов" и "менял нужные объекты" - какие-то слишком общие слова, разговор ни о чём. И так понятно, что будут обработчики кликов, понятно, что что-то будет меняться. Конкретики - ноль.

[alex-1917]

Сколько мест-то в зале?

[kot2566]

Dima Polos, нет, не совсем. Просто вопрос у меня более общий, не именно для кинозала - Как эффективно и лаконично связывать состояние html элементов с соответствующими объектами (например, список выбранных билетов, который надо передать серверу).
0xD34F, https://pastebin.com/zuCqnRd3 - корявая реализация на jquery и d3.js. Поможет ли Vue уменьшить количество кода и повысить читабельность?


alex-1917, не особо имеет значение. И не обязательно места в зале. Просто элементы состояние которых нужно синхронизировать, например, с каким нибудь массивом. Пусть массивом билетов в зале.

В принципе, Сергей delphinpro ответил на мой вопрос

[alex-1917]

Кстати, если набрать VUE в русской раскладке, то получится МГУ. Совпадение? ...)))

Answer 1

[Сергей delphinpro]

минут пять, на коленке:

Comments

[alex-1917]

идеально для 8 кресел.
для 1500 кресел массив places потянет на 1Мб.

[Сергей delphinpro]

alex-1917, Откуда дровишки? У меня книга Война и Мир в fb2 формате занимает около двух метров. А там Толстой явно поболее нацарапал, чем будет занимать инфа о каких-то полутора тысяч кресел...

Ну и никто не запрещает подгружать данные отдельно.

[alex-1917]

Сергей delphinpro, дровишки с кассир-ру.
Имеется ввиду занятость кресел, айдишники ценовых категорий, подписи .
Вы формируете список ul-li, на большом количестве кресел, грубо от 2000, уже будут тормоза, особенно на моб. устройствах.
Поэтому кассир внезапно формирует схему зала на полигонах, браузер съедает 5-9к кресел влегкую, но для полигона уже надо больше инфы, вы должны понимать, как минимум points="406.558572087,0.5 436.558572087,0.5 436.558572087,30.5 406.558572087,30.5 "
Вот пример одного кресла с кассира, это то, что сервер посылает на клиента в xml:

spoiler

<polygon fill="rgb(242,242,242)" fill-opacity="1" kh:className="SchemeSeat" kh:id="545786989" kh:number="9" kh:rowName="Ряд" kh:rowNumber="1" kh:seatName="Место" kh:type="seat" kh:zIndex="4" points="368.558572087,0.5 398.558572087,0.5 398.558572087,30.5 368.558572087,30.5 " stroke="rgb(216,216,216)" stroke-opacity="1" stroke-width="1.0"/>
<text alignment-baseline="top" fill="rgb(0, 0, 0)" fill-opacity="1" font-family="Sans-Serif" font-size="12" font-weight="bold" kh:className="SchemeSeatText" kh:zIndex="0" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="0.0" text-anchor="middle" x="383.558572087" y="21.5">9</text>

Возможно, у ТС вопрос о зале в 300 мест, тогда смысла нам тут расписюливаться однозначно нет)))

[kot2566]

alex-1917, делал около 1000 мест с использованием svg, jquery и d3.js, вроде нормально - https://pastebin.com/zuCqnRd3 . Но вопрос не про оптимизацию скорости)

[kot2566]

На вашем примере. Функция alert так и не будет вызвана, если нажать на какое-либо место, т.е. изменить свойство какого-либо объекта place.checked.


Почему Вычисляемое свойство не срабатывает на каждое событие "изменение объектов из data", а только в том случае, когда оно где-то вызывается ( в функции из app или в html)?

[Сергей delphinpro]

kot2566, я не понял о чем речь. вычисляемое свойство нормально работает. Это видно по изменению цены. Вы чего добиться хотите? В смсле зачем вам алерт, или что-то, что будет вместо него?

[kot2566]

В смысле, я хотел сказать, что я изменил немного код из вашего примера на код ниже https://jsfiddle.net/kepo4ka/fLvtjs7q
Вычисляемое свойство срабатывает только при его вызове где-нибудь (в функции, внутри html), а не во всех случаях изменения данных из data. Почему Выч. свойство не может работать "в фоне".
Я, например, хочу присваивать переменной test значение свойства cost и отображать это значение test .
Хочу вот так:

computed: {
    cost(){
     alert('dont work');
     
      let cost = 0;     
      this.places.map(place => {
        if (place.checked && !place.disabled) {
          cost += place.price;
        }
      });
      this.test= cost
      return cost;
    }
  },

А не так

methods: {
  	toggle: function(place){
      if (!place.disabled) {
      	place.checked = !place.checked;
        this.test = this.cost
      }
    }

И не так
<h3>Test: {{cost}}</h3>

И не так

watch: {
  places: {
  handler(val, oldVal)
  {
  	let cost = 0;     
      val.map(place => {
        if (place.checked && !place.disabled) {
          cost += place.price;
        }
      });
      this.test= cost
     
  },
  deep: true
  }
  },

[imhuman]

А зачем так использовать вычисляемые свойства? Ради того чтобы переменная называлась по-другому? Что-то не так в вашем подходе.

[Сергей delphinpro]

Да, вычисляемое свойство ничего не должно делать. только вычислять своё значение.
Вариант с нужным действием в методе toggle самый правильный.

[Сергей delphinpro]

ну и одно свойство может использовать другое:

computed: {
  cost() { /* … */ }
  test() {  return this.cost; }
}

[kot2566]

Сергей delphinpro, imhuman,
правильно ли тогда решена задача "Получить список выбранных мест (например, для дальнейшей отправки на сервер)"

Или можно сделать иначе?

[Сергей delphinpro]

kot2566, смотрите. Если вы по каждому изменению хотите что-то делать, то да, вам нужно как-то отслеживать изменения.
А если у вас отдельная кнопка для действия (отправить), то все ухищрения ни к чему. Просто делаете вычисляемое поле selected_seats_list и отправляете его значение.

[kot2566]

Сергей delphinpro,

то да, вам нужно как-то отслеживать изменения.

Внутри функции watch, верно?

А если у вас отдельная кнопка для действия (отправить), то все ухищрения ни к чему.

Если я хочу делать эту кнопку "отправить" недоступной для нажатия, если не выбрано ни одного места (если массив selected_seats_list - пустой).

[Сергей delphinpro]

kot2566, да, можно в watch

задизаблить кнопку можно простым условием

<button :disabled="selected_list.length===0">
</button>

[kot2566]

Сергей delphinpro,
Так?

Извините, задолбал.

[Сергей delphinpro]

kot2566, Да, так.
Вы пытались мыслить императивно, а Vue более декларативен.

Answer 2

[imhuman]

alex-1917 заморочился с SVG и axios, кода стало совсем немного больше, это я и имел ввиду под лаконичностью. Так же добавил кликабельность ценников (можно выключать все места определенной стоимости) при выключении группы, билеты, выделенные ранее в группе, перестают добавляться к стоимости, при включении обратно - все снова считается
Сергей delphinpro спасибо, сделал на основе твоей заготовки
kot2566 Посмотри, может пригодится)

P.S. Интересна реализация на jQuery

Comments

[kot2566]

На вашем примере. Функция alert так и не будет вызвана, если нажать на какое-либо место, т.е. изменить свойство какого-либо объекта place.checked.


Почему Вычисляемое свойство cost не срабатывает на каждое событие "изменение объектов из data", а только в том случае, когда оно где-то вызывается ( в функции из app или в html)?
Оно же ведь точно знает, что событие "изменение объектов из data" произошло. Но если нигде не вызывать, то игнорирует это событие.

При использовании watch всё работает, но хочется использовать Вычисляемое свойство.

[imhuman]

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

Answer 3

[alex-1917]

Я бы на вашем месте посмотрел, как сделано на кассире:
1. Выбрал мероприятие
2. Выбрал зал (часть зала - партер, балкон)
3. Аджаксом подгружается xml - весом 1Мб (это примерно на 1500 кресел)
4. Элементами polygon рисуется схема зала.

ХЗ, как тут ВУЕ сильно лучше ДЖИКВЕРИ

Comments

[imhuman]

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

[alex-1917]

imhuman, в смысле лаконичный? Когда для банального аджакса ему вынь и положь axios?
Ну может у вас зал на порядок проще кассира, тогда вообще нет одного правильного решения, есть несколько правильных решений. Одно на Вуе, другое на Джиквери, ....

[imhuman]

Axios это 5 кб, зачем про это вспоминать, если схема зала на 1Мб. Просто нам нравятся разные подходы и это не повод спорить) Без четкого ТЗ не выберешь оптимальное решение на 100%

[alex-1917]

imhuman, axios.min.js =12.6кБ )))
ладно-ладно, спор закрываем, а то будем как тут пищать на весь мир:
vмяу-мяу