Najlepszy sposób reprezentowania par klucz/wartość w nazwach klas HTML

Question

Wiążę rzeczy z obiektami HTML za pomocą javascript i potrzebuję nieco bardziej wyrafinowanego mechanizmu niż tylko nazwy klas.

Moje pierwsze podejście było używać nazw klas jak deklaracje struktura, gdzie wiązanie jest na pozycji nazwy jak tak:

Definition = identifier: foo bar baz 

Kodowanie jakąś nazwę klasy z tej definicji daje

<p id="someid" class="identifier bish bash bosh"> 
<div id="anotherid" class="identifier heebie jeebie"> 

Może to wtedy należy czytać jako:

{foo: bish, bar: bash, baz: bosh}; 
{foo: heebie, bar: jeebie} 

Należy pamiętać, że wiązania mają różne wartości rs parametrów.

To jest bardzo delikatne. Nie mogę ozdobić żadnych elementów html dodatkowymi nazwami (na przykład, aby dodać zachowania jquery takie jak przeciąganie i upuszczanie itp.) I ogólnie jest trochę tandetna ...

Chciałbym je reprezentować jako Główne pary wartości tak:

<p id="someid" class="id{foo:bish} id{bar:bash} id{baz:bosh} random class"> 
<div id="anotherid" class="ui-draggable id{bar:jeebie} id{foo:heebie}"> 

co pozwala mi mieć losową pozycjonowanie i losową długość nazw klas elementów przewidzianych na moje ID to jakoś GUID (ale mogę „make że tak” ręcznie dość łatwo ...)

Teraz, in theory, nazwy klas są CDATA, więc wszystko powinno być tickety-boo, ale mam hae ma do zrobienia! szczególnie na starej stronie przeglądarki ...

Porady, sugestie, wcześniejsze sztuki, najlepsza praktyka w zakresie najlepszej składni par KV w nazwach klas, które zostały z wdzięcznością przyjęte.

Answer 1

HTML5 zamierza dodać atrybuty danych * tylko do tego celu, a te już działają w każdej przeglądarce dzisiaj (ale mogą wysłać kilka weryfikatorów pętli).

http://ejohn.org/blog/html-5-data-attributes/

<li class="user" data-name="John Resig" data-city="Boston" 
    data-lang="js" data-food="Bacon"> 
    <b>John says:</b> <span>Hello, how are you?</span> 
</li> 

Answer 2

Numer allowed className characters pomoże określić, czego należy użyć.

Dla mnie, będę skłaniać się coś takiego:

keys: soft, hard, wet, hot 
values: foo, bar, baz, fuzz 

class="soft_bar wet_foo hot_fuzz" 

w szczególności szelki {} nie będzie działać, ponieważ są one stosowane w arkuszach stylów CSS, aby zaznaczyć bloki właściwości stylu.

Answer 3

konieczne jest, aby w tej klasie ?, można utworzyć dane dla klucz/wartość w Nowym atr

$("#someid").attr("key_val", "id{foo:bish} id{bar:bash} id{baz:bosh}"); 

Answer 4

Jeśli nie jesteś zaniepokojony ważnego HTML, można po prostu zamiast używać nazw arbitralnych atrybutów próby przejęcia atrybutu "klasa".

<p id="someid" foo="bish" bar="bash" baz="bosh"> 

i dostęp do ich wartości z jQuery poprzez:

$("#someid").attr("foo"); // "bish" 

Answer 5

mógłbyś otoczyć dany obiekt z div lub rozciągać? Następnie użyj atrybutów id i/lub class, aby zapisać pary nazwa-wartość i uzyskać do nich dostęp za pomocą właściwości nadrzędnej.

<span id="foo_bar_baz" class="bish_bash_bosh"><p id="someid"></span> 

Pozwala to zrobić cokolwiek chcesz na oryginalnym obiekcie.