HTML и JQuery Дизайн Передачи Информации

Question

Я разрабатываю веб-приложение, используя ASP.NET и jQuery, и могу воспользоваться некоторыми советами.

В настоящее время страница ASP.NET отображает неизвестное количество элементов, которые выполняют действие при нажатии. Javascript на внешнем интерфейсе обрабатывает событие click, в зависимости от того, какой конкретный элемент был выбран.

Каждый элемент содержит информацию, необходимую для функции javascript. Эта информация добавляется в качестве дополнительных атрибутов. Так, например, данный элемент может выглядеть как

<a href="#" id="123" extrainformation="something important">Link 123</a>

jQuery затем присоединяет событие click и использует атрибут extrainformation в качестве параметра для внутренней функции. Каждый элемент имеет 3-5 параметров.

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

Есть ли лучший способ сделать это? Или, может быть, я просто обдумал это?

Answer 1

Да, есть лучший способ, он называется Атрибуты данных HTML5 Вы можете получить к ним доступ из jQuery с помощью интерфейса $.data().

Например:

//instead of
<a href="#" id="123" extrainformation="something important">Link 123</a>
//use
<a href="#" id="123" data-info="something important">Link 123</a>

//then access it like
var info = $('#123').data('info');
alert(info); //alerts: 'something important'

Обычно все, что начинается с data-, хранится как данные об этом элементе в DOM, jQuery может получить доступ к этим данным через функцию $.data().