Czy istnieje dobry sposób na dołączanie obiektów JavaScript do elementów HTML?

96

Chcę powiązać obiekt JavaScript z elementem HTML. Czy jest na to prosty sposób?

Zauważyłem, że HTML DOM definiuje metodę setAttribute i wygląda na to, że jest ona zdefiniowana dla dowolnej nazwy atrybutu. Jednak może to tylko ustawić wartości ciągów. (Możesz oczywiście użyć tego do przechowywania kluczy w słowniku).

Szczegóły (choć najbardziej interesuje mnie pytanie ogólne):

W szczególności mam elementy HTML reprezentujące węzły w drzewie i próbuję włączyć przeciąganie i upuszczanie, ale zdarzenie upuszczania jQuery da mi tylko elementy przeciągane i upuszczane.

Wydaje się, że normalnym wzorcem przekazywania informacji do programów obsługi zdarzeń jest tworzenie elementów HTML w tym samym czasie, w którym tworzysz obiekty JavaScript, a następnie definiowanie programów obsługi zdarzeń przez zamykanie tych obiektów JavaScript - jednak nie działa to zbyt dobrze w tym przypadku przypadek (mógłbym mieć globalny obiekt, który zapełnia się, gdy zaczyna się przeciąganie ... ale to wydaje się nieco nieprzyjemne).

user47741
źródło

Odpowiedzi:

44

Czy przyjrzałeś się metodzie data () jQuery ? Jeśli chcesz, możesz przypisać do elementu złożone obiekty lub możesz wykorzystać tę metodę do przechowywania odniesienia do obiektu (lub przynajmniej niektórych innych danych).

Phil Wheeler
źródło
8
Dziękuję: to jest to, czego szukałem. Co ciekawe, aby zdefiniować tę metodę, jquery przechowuje klucze w globalnym słowniku w atrybucie ciągu w każdym elemencie. Nazwa tego atrybutu łańcuchowego jest generowana losowo podczas pierwszego ładowania jquery. (Sugerowanie, że nie ma dobrego sposobu na zrobienie tego, nie jest przyjemniejszym sposobem, aby to zrobić tylko przy użyciu DOM)
user47741
6
Warto zauważyć, że jQuery data() działa , używając odpowiedzi, której udzielił bobince, więc jeśli nie używasz jeszcze jquery, równie dobrze możesz go użyć.
Eamon Nerbonne
6
Zabawne, jak mogę spojrzeć wstecz na tę odpowiedź 6 lat później i pomyśleć: „To jest bardzo nieoptymalna odpowiedź. @Bobince powinien mieć zaakceptowaną odpowiedź”.
Phil Wheeler
6
W tym pytaniu nie ma tagu jQuery.
Michał Perłakowski
111

Obiekty JavaScript mogą mieć przypisane do nich dowolne właściwości, nie musisz nic specjalnego robić, aby na to zezwolić. Obejmuje to elementy DOM; chociaż to zachowanie nie jest częścią standardu DOM, miało miejsce już w pierwszych wersjach JavaScript i jest całkowicie niezawodne.

var div= document.getElementById('nav');
div.potato= ['lemons', 3];
bobince
źródło
5
@ tat.wright - Arbitralne właściwości elementów HTML, o których mówi, nazywane są właściwościami Expando. Zwróć też uwagę, że div.potato nie oznacza div.getAttribute ("ziemniak")
nickytonline
37
@Tim Down: po prostu tego nie rób. Nie rozumiem, dlaczego nie jest wiarygodny - to tak, jakby powiedzieć, że obiekt String jest zawodny, ponieważ możesz ustawić go na null.
simon
5
@TimDown: Ale nie będzie ustawienie document.expando = falseprzerwy jQuery.data też?
Joey Adams
8
Z mojego doświadczenia wynika, że ​​może to być złe, to możliwe wycieki pamięci. Może istnieć łatwy sposób na uniknięcie tego, ale kiedy stworzyłem projekt, który wykorzystywał to intensywnie, miał wiele wycieków pamięci. Myślę, że musisz być bardzo ostrożny, ponieważ zliczanie odwołań nie jest obsługiwane (nie jest czyszczone), jeśli element zostanie usunięty ze strony, i prawdopodobnie na odwrót.
eselk
7
Uczciwe ostrzeżenie: szczęśliwie robiłem to, co opisuje odpowiedź, ale zamiast nazwy pola „ziemniak” użyłem „zakres”. Okazuje się, że "zakres" jest atrybutem elementów komórki tabeli ( <td>), a obiekt, który przypisałem do tego pola, był # toString'ed. Byłem bardzo zdezorientowany, widząc td.scope === '[obiekt obiekt]'.
David Groomes