jQuery dinamik olarak karmaşık HTML parçaları oluşturmak için

Question

jQuery'yi kullanarak yarı karmaşık bir HTML div öğesi oluşturmak (en azından JSON verileriyle bir şablonun bir örneğini doldurmak ve bir listeye eklemek). Veriler JSON formatındadır (eğer önemliyse) ve her bir ebeveyn girişi için bir atlı karınca-tipi elemanın başka bir divini eklemek istiyorum.

$('#list').append('<li><div id=" + entry.id +"><span id="highlight> + entry.name + <span/><div id="picture" .... 

(bir noktayı sadece var orada bahane hatalarını) çalışmak fakat bakımı çok zor olacaktır: örneğin

Uzun beyan. Daha verimli bir yol olmalı.

Teşekkürler.

Answer 1

Sen javascript çiftleşmiş dillere arıyoruz - orada ton orada vardır:

• underscore.js;
• mustache.js;
• jade;
• handlebars.js;

  <p>Hello <strong><%=user.name %> <%=user.lastname %></strong></p> 
  

  Tarafından:

  var myUser = { name : 'John', lastname : 'Doe' }; 
  
  $('#awesomeDiv').html(
      someTemplateFunction({ user : myUser }) 
  ); 
  

  Ve someTemplateFunction() gibi vücut şey yapacak:

• daha birçok ...

fikri verileri ve ayrı görüşünü tutmaktır tutan Şablon kütüphanesinin bu şablonu [DOM'den veya harici bir dosyadan geliyor] ayrıştırabildiğini kastediyorum ve yeni DOM öğelerine dönüştürmek için.

Benim seçimim underscore.js çünkü çok az kullanışlı ve kullanışlı bir kütüphane, etrafınıza bakmaktan çekinmeyin.

Answer 2

Bazı şablonlar arıyorsunuz. Birçok vardır: sizin için ne çalışacaktır eğer

• Handlebars
• Hogan
• dust.js
• Mustache
• underscore templates
• jQuery templates

Answer 3

Bilmiyorum' Yapıyor ama yakın zamanda benzer bir sorun vardı ve ben eklemek için html ile benim js 'polize etmek istemedim. Benim çözümüm, sayfadaki tüm html'leri eklemek ve gerektiğinde, onu açığa çıkarabileceğim ya da bazı durumlarda istediğim div 'ı kopyalayabilmem için gizlenmekti.