Как связать данные (идентификаторы) со ссылками на JavaScript?

Question

Я пытаюсь написать довольно сложную динамическую веб-страницу, используя JQuery AJAX, и я пытаюсь понять, как связать мои ссылки (<a ...>) с данными, с которыми они связаны, такими как имена действий и данные. идентификаторы элементов. Я обдумал несколько разных схем, но не уверен, что мне нравится какая-либо из них.

Встраивание в onclick, что означает, что я должен настроить его при генерации ссылки.

<a onlick="func('abc', 123)">...</a>

Вставка в идентификатор ссылки, что означает разбор в JavaScript.

<a id="link_abc_123">...</a>

Помещение ссылки в div со скрытыми элементами ввода ...

<div>
   <a>...</a>
   <input type="hidden" name="action" value="abc"/>
   <input type="hidden" name="id" value="123"/>
</div>

Существует ли передовая практика или общепринятый способ структурирования этих данных?

Answer 1

Лучшая практика всегда должна заключаться в строгом разделении кода.

Это означает, что вы не должны включать какой-либо Javascript в свой исходный код.Так что лично я большой поклонник либо помещения данных о необходимости в элементы (ваш последний пример) при использовании механизма шаблонов, либо отправки только данных о необходимости в отдельном запросе (например, JSON )клиенту.

Используя jQuery, это очень удобный способ создания data- атрибутов, где вы можете хранить любую информацию, тогда как jQuery будет переводить значения из этих атрибутов в данные расширяются .Например:

<div id="test" data-foo='bar' data-test='{"cool": "stuff"}'>Just a div</div>

При выборе этого элемента с помощью jQuery var $test = $('#test') вы можете получить доступ к:

$test.data('foo') // === 'bar'
$test.data('test').cool // === 'stuff'

Подробнее: http://api.jquery.com/data/

Answer 2

С HTML5 вы можете использовать атрибуты data-* - например:

<a href="somewhere" data-action="do-this" data-foo="bar">...</a>

Какой jQuery действительно поддерживает - вызовы $('a').data() будут включать в себя значения data-*.

Answer 3

Я бы пошел с новыми Настраиваемыми Атрибутами Данных HTML5 приносит с собой.

Просто используйте это <a data-action="foo" data-id="bar">...</a>

Кроме того, jQuery уже имеет поддержку для получения этих атрибутов данных

Answer 4

Для простых вещей я использую функцию вроде:

function getIdStr(i, sDelim) {
    if (typeof i != "string") {
        var i = $(i).attr("id");
    }
    var arr = i.split(sDelim || /_|-/);
    if (arr.length > 1) {
        return arr[arr.length-1];
    } else {
        return "";
    }
}

// usage
$(function(){
    $(".data .action").click(function(){
        doSomething(getIdStr(this)); // -> 123
    });
});

Для чего-то более тяжелого, вы можете попытаться прикрепить data к верхнему контейнеру.

Answer 5

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

<input type="hidden" name="action" value="abc" yourproperty='<%= Eval("YourDataID") %>'/>