2013-04-05 9 views
23

Poiché l'attributo HTML data consente di aggiungere dati personalizzati, mi chiedo se sia una buona idea includere un set di un elenco JSON come un attributo data? Quindi, il corrispondente JSON può essere facilmente accessibile dagli eventi JavaScript con getAttribute("data-x").È brutto aggiungere JSON sull'attributo dei dati HTML?

In realtà, la mia domanda è: è standard, efficiente e ragionevole aggiungere un grande insieme di dati a un attributo HTML?

Per esempio

<div data-x="A LARGE SET OF JSON DATA" id="x"> 

o grandi set di dati JSON devono essere conservati all'interno <script> tag, e un attributo HTML non è un luogo ideale per grandi set di dati, anche per l'attributo data.

+4

Sarebbe MOLTO meglio memorizzare i dati in un tag di script. Memorizzarlo in un attributo dati, mentre tecnicamente possibile, sembra una cattiva pratica. Buf se lo volessi davvero, potresti. HTML5 specifica nessun limite per le lunghezze degli attributi. (Potrebbe essere necessario codificarlo o qualcosa comunque.) – GJK

+1

@GJK: Ciò dipende dal caso d'uso: se l'oggetto JSON in questione è un singolo oggetto di dati globale, probabilmente hai ragione; se ci sono più oggetti simili, ciascuno associato a un particolare elemento DOM, allora questo è esattamente il tipo di cosa a cui sono destinati gli attributi dei dati, quindi utilizzarli non è necessariamente una cattiva pratica (memorizzando l'intera cosa come una stringa in un singolo attributo potrebbe essere, naturalmente, ma c'è anche la possibilità di memorizzare proprietà individuali in diversi attributi di dati). –

+0

@GJK Non penso che sia considerato una cattiva pratica archiviare un enorme set di dati in un attributo di dati. La vera ragione per la creazione di un tale tag è intesa per l'archiviazione dei dati. –

risposta

29

Invece di memorizzare tutto nell'attributo dati, è possibile utilizzare un identificatore per accedere ai dati.

Così, per esempio si potrebbe fare questo:

var myBigJsonObj = { 
         data1 : { //lots of data}, 
         data2 : { //lots of data}     

        }; 

e poi avuto qualche html in questo modo:

<div data-dataId="data1" id="x"> 

È possibile utilizzare jQuery per ottenere i dati ora in questo modo:

var dataId = $('#x').attr('data-dataId'); 

var myData = myBigJsonObj[dataId]; 

Questo è l'approccio migliore imho.

+0

Questa è una soluzione davvero intelligente! Grazie. Con 'myBigJsonObj ["proprietà"] = valore;' il contenuto può essere creato e recuperato dinamicamente – Silve2611

+2

e questo potrebbe non funzionare sempre. Soprattutto quando si desidera impostare i dati dal lato server. – theusguy

0

Mentre non c'è nulla che impedisca l'incorporamento di una lunga stringa di JSON in un attributo di dati, probabilmente il modo più corretto per farlo sarebbe quello di aggiungere un attributo di dati per proprietà dei dati JSON. es:

JavaScript:

var dataObj = { foo: 'something', bar: 'something else' } 

HTML:

<div data-foo="something" data-bar="something else"></div> 

questo modo ogni pezzo di dati nell'oggetto JSON corrisponde a un pezzo separato, indipendentemente accessibile dei dati associati all'elemento DOM .

Tenete a mente che in entrambi i casi avrete bisogno di fuggire i valori che si sta inserendo nel codice HTML -. Caratteri altrimenti vaganti "si romperà la pagina

+0

Credo che se usi 'JSON.parse', i caratteri sono sfuggiti se necessario – Chintsu

1

dire che si desidera salvare l'oggetto var dataObj = { foo: 'something', bar: 'something else' }; a un html dati attributo.

Consideriamo prima stringifying l'oggetto in modo tale che abbiamo var stringifiedDataObj = JSON.stringify(dataObj);

Quindi è possibile utilizzare jQuery per impostare lo stringifiedDataObj come attributo di dati ad esempio con l'jQuery.data() API

Problemi correlati