Уважаемые коллеги,
Сам я не местный и имею крайне мало опыта в разработке фронт-ендов и у меня вопрос относительно паттерна проектирования UI. А именно как делать правильно.
Задача следующая:
Есть элементы списка и нужно чтобы при нажатии на какой либо элемент появлялось модальное окно. Где при нажатии на кнопку "Cancel" не происходило ничего, т.е. модальное окно закрывалось.
Но при нажатии на кнопку "Continue" происходила отправка id элемента LI на сервер-сайд.
В качестве демонстрации выше сказанного привожу 3и варианта того что удалось придумать, но я не совсем не уверен в их правильности.
Как впрочем и не уверен в том что есть какой то 4ый расово верный.
В общем хочу получить совет о правильном подходе при работе с модальными окнами.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form id="dialog-confirm" style="display:none">
<span>If you continue following connections will be lost</span>
<input type="hidden" name="tmp">
<button>Continue</button>
<button onclick="$('#dialog-confirm').hide(); return false;">Cancel</button>
</form>
<ul>
<li id="first" onClick="showModal(this);">my first text</li>
<li id="secod" onClick="showModal(this);">my second text</li>
</ul>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Первый подход не нравится тем что нужно постоянно вызывать функцию удаления всех евентов с элемента $( "#dialog-confirm" ).
function showModal(item) {
var id = $(item).attr("id");
$( "#dialog-confirm" ).show();
$( "#dialog-confirm" ).off(); //Вот этот момент больше всего не нравится, так как всегда приходит удаление всех event'ов у #dialog-confirm
$( "#dialog-confirm" ).on('submit', function(e) {
var deleted = sendData(id);
});
}
function sendData(id) {
console.log(id);
//Отправка данных на сервер-сайд
return true;
}
Второй подход не нравится тем что в HTML необходимо держать часть логики, а именно деражать в элемент
<input type="hidden" name="tmp"> что идеологически кажется не правильным.
function showModal(item) {
var id = $(item).attr("id");
var $tmp = $('#dialog-confirm').find("input[name='tmp']");
$tmp.val(id);
$( "#dialog-confirm" ).show();
}
function sendData(id) {
console.log(id);
//Отправка данных на сервер-сайд
return true;
}
$( "#dialog-confirm" ).on('submit', function(e) {
var $tmp = $('#dialog-confirm').find("input[name='tmp']");
var id = $tmp.val();
var deleted = sendData(id);
});
Третий подход нравится больше всего, ибо и код короче и выглядит понятнее, но есть один недостаток, это хранение глобальной переменной вне функций, в случаи наличия большого числа модальных окон, таких глобальных переменных будет очень и очень много, что значительно ухудшит читаемость JS.
var id;
function showModal(item) {
id = $(item).attr("id");
$( "#dialog-confirm" ).show();
}
function sendData(id) {
console.log(id);
//Отправка данных на сервер-сайд
return true;
}
$( "#dialog-confirm" ).on('submit', function(e) {
var deleted = sendData(id);
});