JQuery Daten in HTML vorbelegen

Question

JQuery hat das sehr coole Feature/ die Methode ".data", ich frage mich, ob es eine Möglichkeit gibt, die Daten im Code zu haben, so dass jQuery sie verwenden kann, wenn das Rendern von HTML erfolgt. Angenommen, ich habe einen Repeater und loopende Kinder aus, und ich möchte diesen Kindern etwas Daten hinzufügen, ohne Klassen zu verwenden, etc. Muss ich Javascript zu diesem Repeater hinzufügen, nur um Sachen zum "Daten von jQuery" hinzuzufügen oder gibt es einen besseren Weg?

Answer 1

Es gibt das Metadaten-Plugin, das möglicherweise das macht, worüber Sie sprechen.

Zum Beispiel können Sie folgendes tun: (Sie können aus verschiedenen Formaten wählen, indem Sie eine Option setzen)

...
ODER
...
ODER
{some:"json",data:true} ...
ODER
...

Danach können Sie einfach folgendes tun:

var data = $('li.someclass').metadata();
if ( data.some && data.some == 'data' )
    alert('Es hat funktioniert!');

Answer 2

HTML 5 hat einen neuen Standard für Attribute, die mit "data-" beginnen. Siehe hier Link-Text.

Sie könnten dies verwenden, um Daten zu speichern und einen Selector zu verwenden, um die Daten auszulesen.

Answer 3

Denkst du: "Welcher bessere Ort, um die Daten eines Objekts zu speichern, als auf dem Element selbst"?

Zum Beispiel hast du eine Schale mit Obst?

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

Jetzt renderst du 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 kannst du das Objekt trivial zum Element hinzufügen, indem du diese letzte Zeile änderst und das tatsächliche Objekt an ihre Elementdarstellung anfügst:

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

Das macht es ziemlich einfach, auf die Daten zuzugreifen, wenn ein Ereignis eintritt. Zum Beispiel ändere die Render-Routine, um ein Klickereignis einzuschließen:

Fruit.prototype.render = function(){
    var el = createElement('li').html(this.name)
    el.click(function(){
        alert('Du hast auf einen ' + $(this).data('obj').name + ' geklickt')
    }
}

Jetzt könnte man leicht argumentieren, dass es albern ist, das Objekt zu duplizieren, indem man es auf diese Weise an die Elemente anhängt, da du bereits das Objekt sowohl im Skopus des Skripts als auch, wenn du es richtig schreibst, im Abschluss des Objekts hast. Und das sind wahrscheinlich gültige Argumente. Aber das finde ich auch ziemlich cool :-)