Передача данных в динамически сгенерированных ссылках с Javascript

Question

Вопрос: Вот как я передаю данные с помощью js. Является ли это хорошим способом заниматься этим, или я делаю это неправильно? Он работает, но кажется ... подозрительным, я полагаю, к моим относительно ноу-хау-навыкам.

У меня есть настраиваемый плагин, который генерирует сетку данных. Предположим, он генерирует строки имен пользователей с их идентификатором #, ролью, датами и т. Д.

Я хочу, чтобы у меня была возможность щелкнуть ссылку «изменить» в каждой строке, которая отображает модальное окно для управления данными. Возможно, измените роль пользователя.

Сетка генерируется кодом, завернутым в анонимную функцию, а модальная генерируется кодом, завернутым в другую анонимную функцию. Мне нужно заполнить modal правильными данными для этой конкретной нажатой строки.

Что я сделал, это включить необходимые данные в качестве настраиваемых атрибутов в ссылке, которая нажата для управления данными этого пользователя. Сформированная ссылка выглядит примерно так:

<a href="#" userrole="role1" userid="12345"> Manage </a>

Так, нажав на эту ссылку запустят модальное окно, а затем я использую некоторые JQuery, чтобы захватить значение атрибутов и заполнение модальности. Пример:

Во-первых, код, который обрабатывает щелчок (просто предположим, что обработчики кликов и другой материал document.ready() назначены ... Я оставил это для краткости, но это основано на правильном коде) :

(function(){ 
    var EditUserClick = function(e) { 
     userRole = $(this).attr('userrole'); //assign some values 
     userId = $(this).attr('userid'); // assign some values 

     OpenEditUserModal(userRole,userId); 
    } 
}); 

Во-вторых, код, который обрабатывает модальность:

//Public stuff so it's accessible to the click. 
var OpenEditUserModal; 

(function(){ 
    OpenEditUserModal = function(userRole,userId){ 
     //code to handle the modal window opening can go here 
     //populate the modal 
     $('#userRole').text(userRole); // let's say this is a text field 
     $('#userId').val(userId); //let's say this is a hidden form field 
    } 
}); 

Так как об этом? Есть ли лучший способ передать эти данные, а не назначить его атрибутам подключенной ссылки и передать его onclick следующему методу? Любые другие советы приветствуются ... всегда хотят учиться.

Answer 1

Если вы не заботитесь о том, чтобы ваши HTML-документы передавали проверки проверки, а код работает так, как есть - держите его таким образом.

В менее навязчивым, более соответствующий стандартам подход можно положить все вещи в атрибуте HREF и просто разобрать пар ключ-значение по щелчку (see this question советы о том, как это сделать).

<ul> 
<li><a href="index.html?foo=bar&id=1">first</a>/li> 
<li><a href="?foo=woo&id=2">second</a></li> 
</ul> 

Trivial JS для этого:

$('a').click(function(){ 
    var querystring = $(this).attr('search'); 
    //console.log(querystring); 

    // parse here and call OpenEditUserModal  
    return false; 
});