Nano Hash - криптовалюты, майнинг, программирование

Должен ли я использовать одну форму на странице или создать форму для каждого элемента?

Я хочу отобразить список элементов. Рядом с каждым элементом будет значок редактирования и значок удаления.

По понятным причинам я хочу инициировать действие удаления с помощью HTTP POST.
С помощью jQuery я бы привязывал ссылки для запуска form.submit.

Однако я не уверен, следует ли создавать форму рядом с каждым элементом или использовать только одну форму.
Ниже приведены плюсы и минусы двух подходов, как я их вижу.

Форма для элемента:

  • легко генерировать;
  • не нужно возиться с JS, чтобы установить действие и входное значение.

Одна форма:

  • имеет больше смысла семантически;
  • требует, чтобы клиент JS установил скрытый ввод;
  • требует, чтобы клиент JS установил действие формы (например, id + '/delete/).

Что тут добавить? Каков предпочтительный шаблон в современных HTML-приложениях?

http forms html design-patterns post
29.09.2011

Ответы:


1

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

29.09.2011

2

Главный недостаток, который я вижу в наличии единой формы, охватывающей все элементы списка, заключается в том, что вы можете получить огромный POST, если список длинный. В качестве преимущества вы можете пометить несколько элементов для удаления (например, флажки) и выполнить один запрос на удаление.

Я бы пошел на любой

  1. Единая форма для каждого элемента списка. Это сделало бы невозможным удаление нескольких элементов, но сохранило бы минимальные размеры POST.
  2. Использование одной формы, но таким образом, чтобы не включать все элементы списка. Например, иметь форму только для удаления с одним скрытым элементом, в который вы поместите все идентификаторы, помеченные для удаления, с помощью JS-манипуляции.

В качестве примечания вы также можете пропускать формы и выполнять необходимые взаимодействия через ajax. Это значительно улучшит пользовательский опыт. Учтите, что формы по-прежнему потребуются для предоставления резервных механизмов в случае необходимости.

29.09.2011

3

В конце концов я решил использовать AJAX через jQuery.ajax.

Причина в том, что семантически у меня даже нет форм — у меня есть кнопки.
Таким образом, jQuery — более простое решение, поскольку оно позволяет размещать логику в одном месте (а не разбрасывать ее по HTML и JS).

Я назначил класс row каждой семантической строке и поместил соответствующие идентификаторы базы данных в HTML5 data атрибут вызывается data-row-id для каждой строки.

<div class="row" data-item-id="{{ product.id }}">
    <!-- ... --->

    <a href="#" class="delete-btn"><img src="/img/delete.png" alt="Delete"></a>
</div>

Тогда у меня что-то одни строчки

$('.delete-btn').click(function() {
    var row = $(this).closest('.row');
    var id = row.data('item-id');

    $.ajax({
        url: id + '/delete/',
        type: 'POST'
    });

    row.fadeOut().slideUp();
    return false;
}

в моем обработчике загрузки $().

Это решение прекрасно масштабируется по всей кодовой базе, потому что вам нужно только установить класс row и атрибут data-item-id, и кнопки будут «просто работать».

30.09.2011
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..