Prepopulate jQuery Daten in html

Question

jQuery hat die sehr coole Funktion/Methode ".data", ich frage mich, ob es eine Möglichkeit gibt, die Daten im Code zu haben, so dass jQuery es verwenden kann, wenn das Rendern von HTML getan wird. Angenommen, ich habe einen Repeater und löse Kinder aus, und ich möchte diesen Kindern einige Daten hinzufügen, ohne Klassen zu verwenden. Muss ich diesem Repeater Javascript hinzufügen, nur um den "Daten von Jquery" etwas hinzuzufügen oder gibt es etwas Besseres Weg?

Answer 1

Es ist die metadata plugin, die tun könnte, was Sie sprechen über

Zum Beispiel können Sie tun: (Sie können, indem Sie eine Option aus anderen Format auswählen)

<li class="someclass {some: 'data'} anotherclass">...</li> 
OR 
<li data="{some:'random', json: 'data'}">...</li> 
OR 
<li><script type="data">{some:"json",data:true}</script> ...</li> 
OR 
<li data-some="'random'" data-json="'data'">...</li> 

Danach können Sie einfach tun:

var data = $('li.someclass').metadata(); 
if (data.some && data.some == 'data') 
    alert('It Worked!'); 

Answer 2

HTML 5 hat einen neuen Standard für Attribute beginnend mit "Daten". Siehe hier link text.

Sie können dies verwenden, um Daten zu speichern und einen Selektor zum Auslesen der Daten zu verwenden.

Answer 3

Denken Sie darüber nach, "welcher bessere Ort zum Speichern der Daten eines Objekts als das Element selbst"?

Zum Beispiel haben Sie eine Schale mit Obst?

function Fruit(name, color){ 
    this.name = name 
    this.color = color 
} 
var apple = new Fruit("apple", "red") 
var orange = new Fruit("orange","orange") 
var bowl = [apple, orange] 

Jetzt rendern Sie die Obstschale auf der Seite?

Fruit.prototype.render = function(){ 
    return createElement('li').html(this.name) 
} 
$.each(bowl, function(i, fruit){ 
    $('#fruitbowl').append(fruit.render()) 
} 

Ok. Jetzt Sie können fügen Sie das Objekt mit dem Element trivialer durch die letzte Zeile zu ändern und die eigentliche Frucht Objekt zu ihrem Element Renderings Anbringen so:

 $('#fruitbowl').data('obj', fruit).append(fruit.render()) 

Was es verflixt macht einfach, die Daten zuzugreifen, wenn ein Ereignis eintritt . Zum Beispiel der Rendering-Routine ändern, um ein Click-Ereignis umfassen:

Fruit.prototype.render = function(){ 
    var el = createElement('li').html(this.name) 
    el.click(function(){ 
     alert('You clicked on an ' + $(this).data('obj').name) 
    } 
} 

Nun kann man leicht argumentieren, dass es um das Objekt zu duplizieren, indem es auf die Elemente auf diese Weise angebracht wird, da Sie bereits haben die Aufgabe, sowohl dumm ist, im Rahmen des Skripts, und wenn Sie es richtig schreiben, innerhalb der Schließung des Objekts. Und das sind wahrscheinlich gültige Argumente. Aber das, stimme ich zu, ist ziemlich cool :-)