jQuery Verilerini html olarak hazırlayın

Question

jQuery, çok güzel bir özellik/yöntem ".data" değerine sahiptir. Kodda veriye sahip olmanın bir yolu olup olmadığını merak ediyorum; böylece jQuery, html oluşturulduğunda bunu kullanabilir. Bir tekrarlayıcıya sahip olduğumu ve çocukları devre dışı bıraktığımı varsayalım ve sınıfları kullanmadan bu çocuklara bazı veriler eklemek istiyorum. Sadece jquascript'i "jquery verisine" eklemek için bu tekrarlayıcıya eklemem gerekecek mi yoksa biraz daha iyi mi yolu? yapabilirsiniz Bundan sonra

<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> 

(bir seçeneği ayarlayarak farklı formatta seçim yapabilecekleri):

yaklaşık

Örneğin, yapabileceğiniz neler konuştuğunu yapabilir metadata plugin

Answer 1

yoktur sadece aşağıdakileri yapın:

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

Answer 2

HTML 5'in "data-" ile başlayan nitelikler için yeni bir standardı vardır. Buraya bakın link text.

Verileri kaydetmek ve verileri ayrıştırmak için bir seçici kullanmak için bunu kullanabilirsiniz.

Answer 3

"Nesnenin verilerini depolamak için öğenin kendisinden daha iyi bir yer" düşünmüyor musunuz?

Örneğin bir kasede meyve var mı?

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] 

Şimdi meyve kasesini sayfada oluşturuyorsunuz?

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

Tamam. Şimdi trivially son satırı değişen ve böylece eleman render gerçek meyve nesne takılarak elemana nesneyi ekleyebilirsiniz: yapar

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

darn bir olay meydana geldiğinde verilere erişmek için kolay . Örneğin bir tıklama etkinliğini içerecek şekilde çevirme rutinini değiştirmek:

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

Şimdi kimse zaten nesneyi hem beri bu şekilde elemanlarına ekleyerek nesneyi çoğaltmak için saçma olduğunu savunuyorlar kolayca yapabilirsiniz, Senaryo kapsamında ve eğer doğru yazarsanız, nesnenin kapanışı içinde. Ve bunlar muhtemelen geçerli argümanlar. Ancak, bu katılıyorum, çok güzel :-)