скрытые данные в html5

В спецификации html5 сейчас есть любопытное свойство элементов dataset, идущее в комплекте с атрибутами data-*. Эта парочка предназначена для удобного встраивания скрытых данных в документ. Например, яваскрипту, обрабатывающему элементы списка, могут пригодиться внутренние системные айдишники этих объектов, но сейчас у разработчика нет нормального способа разместить эти данные в документе. Конечно, числа можно с какими-то особыми префиксами запихать в атрибуты id или class, но я бы не стал хвастаться таким подходом. Кроме того, с более сложными данными это не прокатит. Вариант включать эти данные в скрытые элементы нравится мне ещё меньше.

Теперь нам предлагается, что атрибут data-name будет доступен как свойство name в свойстве dataset самого элемента. Подробнее об этом в посте «HTML 5 data- Attributes» Джона Резига, который и сподвиг меня на действие. (Кстати, там в комментах любопытный флейм.) Но на пути к счастью стоит обычная проблема: браузеры эту фичу ещё не поддерживают. И решается она обычным способом — небольшой доработкой фреймворка.

Element.addMethods({
    getDataset: function(element) {
        if (element.dataset) return element.dataset;
        var match, dataset = {};
        $A(element.attributes).each(function(attr){
            if (attr.nodeName.startsWith('data-'))
                dataset[attr.nodeName.substring(5)] = attr.nodeValue;
        });
        return element.dataset = dataset;
    }
});

Конечно, круче было бы использовать геттер, но рано ещё : (

update: вместо localName нужно использовать nodeName

Артемий Трегубенко,
, ,

comments powered by Disqus