Döndüğüm bir dizim var. Her koşul doğru olduğunda, HTMLaşağıdaki kodun bir kopyasını bazı değerlere sahip bir kapsayıcı öğesine eklemek istiyorum .

Bu HTML'yi akıllı bir şekilde yeniden kullanmak için nereye koyabilirim?

<a href="#" class="list-group-item">
    <div class="image">
         <img src="" />
    </div>
    <p class="list-group-item-text"></p>
</a>

JQuery

$('.search').keyup(function() {
    $('.list-items').html(null);

    $.each(items, function(index) {
        // APPENDING CODE HERE
    });
});

Projenizde aşağıdakiler gibi bir şablon oluşturma motorunu kullanmaya karar verebilirsiniz:

• bıyık
• underscore.js
• gidonlar

Başka bir kitaplık eklemek istemiyorsanız, John Resig aşağıdakine benzer bir jQuery çözümü sunar .

Tarayıcılar ve ekran okuyucular, tanınmayan komut dosyası türlerini göz ardı eder:

<script id="hidden-template" type="text/x-custom-template">
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    <tr>
</script>

JQuery kullanıldığında, şablona göre satır eklemek şuna benzer olacaktır:

var template = $('#hidden-template').html();

$('button.addRow').click(function() {
    $('#targetTable').append(template);
});

Eski soru, ancak soru "jQuery kullanarak" diye sorduğundan, bunu herhangi bir satıcı bağımlılığı getirmeden yapmanıza izin veren bir seçenek sunacağımı düşündüm.

Piyasada çok sayıda şablon oluşturma motoru varken, özelliklerinin çoğu, en iyi durumda mikro dil olarak görülen iterasyon ( <% for), koşullu ifadeler ( <% if) ve dönüşümler ( <%= myString | uppercase %>) ve en kötü ihtimalle anti-kalıplar ile son zamanlarda gözden düşmeye başladı. Modern şablon oluşturma uygulamaları, bir nesneyi DOM (veya diğer) temsiliyle, örneğin ReactJS'deki bileşenlerle eşlenen özelliklerle (özellikle durumsuz bileşenler) gördüğümüzle eşlemeyi teşvik eder.

HTML İçindeki Şablonlar

Şablonunuzun HTML'sini HTML'nizin geri kalanının yanında tutmak için güvenebileceğiniz bir özellik, yürütülemeyen kullanmaktır <script> type, ör <script type="text/template">. Davanız için:

<script type="text/template" data-template="listitem">
    <a href="${url}" class="list-group-item">
        <table>
            <tr>
                <td><img src="${img}"></td>
                <td><p class="list-group-item-text">${title}</p></td>
            </tr>
        </table>
    </a>
</script>

Belge yüklenirken şablonunuzu okuyun ve basit bir String#split

var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);

Jetonumuzla, onu alternatif [text, property, text, property]biçimde aldığınıza dikkat edin . Bu Array#map, onu bir eşleme işlevi ile bir kullanarak güzel bir şekilde eşlememizi sağlar:

function render(props) {
  return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}

Nereye propsbenzeyebilir { url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }.

itemTplYukarıdaki gibi ayrıştırıp yüklediğinizi ve itemskapsam dahilinde bir diziniz olduğunu varsayarak hepsini bir araya getirirsek :

$('.search').keyup(function () {
  $('.list-items').append(items.map(function (item) {
    return itemTpl.map(render(item)).join('');
  }));
});

Bu yaklaşım aynı zamanda sadece neredeyse hiç jQuery - aynı yaklaşımı vanilya javascript'i document.querySelectorve ile birlikte kullanabilmelisiniz .innerHTML.

jsfiddle

JS içindeki şablonlar

Kendinize sormanız gereken bir soru şudur: Şablonları HTML dosyaları olarak tanımlamak gerçekten istiyor musunuz / buna ihtiyacınız var mı? Bir şablonu her zaman, tekrarlamak istediğiniz çoğu şeyi yeniden kullandığınız şekilde bileşenleştirebilir + yeniden kullanabilirsiniz: bir işlevle.

Es7-land'de, yıkım, şablon dizgileri ve ok işlevlerini kullanarak, $.fn.htmlyukarıdaki yöntemi kullanarak kolayca yüklenebilen düpedüz güzel görünümlü bileşen işlevleri yazabilirsiniz .

const Item = ({ url, img, title }) => `
  <a href="${url}" class="list-group-item">
    <div class="image">
      <img src="${img}" />
    </div>
    <p class="list-group-item-text">${title}</p>
  </a>
`;

Ardından, bir diziden eşlenmiş olsa bile, şöyle kolayca oluşturabilirsiniz:

$('.list-items').html([
  { url: '/foo', img: 'foo.png', title: 'Foo item' },
  { url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));

Oh ve son not: Bir şablona aktarılan özelliklerinizi, eğer bir veritabanından okunuyorlarsa, ya da birisi sayfanızdan HTML'de geçebilirse (ve sonra komut dosyalarını çalıştırabilir, vb.) Temizlemeyi unutmayın.

Bunun yerine HTML şablonu kullanın!

Kabul edilen yanıt, aşırı yükleme komut dosyası yöntemini temsil edeceğinden, bence aşırı yükleme komut dosyalarıyla birlikte gelen XSS riskleri nedeniyle çok daha temiz ve daha güvenli olan başka bir yanıt önermek isterim.

Bunu bir eylemde nasıl kullanacağınızı ve bir şablonu diğerine nasıl ekleyeceğinizi, düzenleyeceğinizi ve sonra DOM belgesine nasıl ekleyeceğinizi göstermek için bir demo hazırladım .

örnek html

<template id="mytemplate">
  <style>
     .image{
        width: 100%;
        height: auto;
     }
  </style>
  <a href="#" class="list-group-item">
    <div class="image">
      <img src="" />
    </div>
    <p class="list-group-item-text"></p>
  </a>
</template>

örnek js

// select
var t = document.querySelector('#mytemplate');

// set
t.content.querySelector('img').src = 'demo.png';
t.content.querySelector('p').textContent= 'demo text';

// add to document DOM
var clone = document.importNode(t.content, true); // where true means deep copy
document.body.appendChild(clone);

HTML <şablon>

• + İçeriği, etkinleştirilene kadar etkili bir şekilde inerttir. Esasen, işaretlemeniz gizli DOM'dur ve işlemez.

• + Bir şablondaki herhangi bir içeriğin yan etkisi olmayacaktır. Şablon kullanılana kadar komut dosyaları çalışmaz, resimler yüklenmez, ses oynatılmaz.

• + İçerik belgede yer almamaktadır. Ana sayfada document.getElementById()veya kullanmak querySelector()bir şablonun alt düğümlerini döndürmez.

• + Şablonlar içinde herhangi bir yere ait yerleştirilebilir <head>, <body>ya da <frameset>ve bu elemanlar izin verilir bir içeriği içerebilir. "Her yerde" <template>ifadesinin, HTML ayrıştırıcısının izin vermediği yerlerde güvenle kullanılabileceği anlamına geldiğini unutmayın .

Geri çekil

Tarayıcı desteği bir sorun olmamalı, ancak tüm olasılıkları kapsamak istiyorsanız, kolay bir kontrol yapabilirsiniz:

Özelliği algılamak <template>, DOM öğesi oluşturun ve .content özellik var olduğunu kontrol edin:

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

Aşırı yükleme komut dosyası yöntemi hakkında bazı bilgiler

• + Hiçbir şey oluşturulmaz - <script>etiket display:nonevarsayılan olarak sahip olduğu için tarayıcı bu bloğu işlemez .
• + Inert - tarayıcı komut dosyası içeriğini JS olarak ayrıştırmaz çünkü türü, dışında bir şeye ayarlanmıştır "text/javascript".
• -Güvenlik sorunları - kullanımını teşvik eder .innerHTML. Kullanıcı tarafından sağlanan verilerin çalışma zamanı dizesi ayrıştırması, kolayca XSS güvenlik açıklarına yol açabilir.

Tam makale: https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old

Faydalı referans: https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode http://caniuse.com/#feat=queryselector

WEB BİLEŞENLERİ OLUŞTURMA Trawersy Media tarafından hazırlanan HTML şablonlarını kullanarak özel web bileşenleri öğreticisi oluşturma: https://youtu.be/PCWaFLy3VUo

Vücutta bir yer ekleyin

<div class="hide">
<a href="#" class="list-group-item">
    <table>
        <tr>
            <td><img src=""></td>
            <td><p class="list-group-item-text"></p></td>
        </tr>
    </table>
</a>
</div>

sonra css oluştur

.hide { display: none; }

ve js'nize ekleyin

$('#output').append( $('.hide').html() );

Diğer alternatif: Saf

Kullanıyorum ve bana çok yardımcı oldu. Web sitelerinde gösterilen bir örnek:

HTML

<div class="who">
</div>

JSON

{
  "who": "Hello Wrrrld"
}

Sonuç

<div class="who">
  Hello Wrrrld
</div>

Bu sorunu çözmek için iki çözüm tanıyorum:

• İlki, şablonu başka bir dosyadan yüklemeniz ve istediğiniz zaman eklemeniz gereken AJAX ile birlikte gelir .clone().

  $.get('url/to/template', function(data) {
      temp = data
      $('.search').keyup(function() {
          $('.list-items').html(null);
  
          $.each(items, function(index) {
               $(this).append(temp.clone())
          });
  
      });
  });

  Verilerin mevcut olduğundan emin olmak için ajax tamamlandıktan sonra etkinliğin eklenmesi gerektiğini dikkate alın!

• İkincisi, onu doğrudan orijinal html'de herhangi bir yere eklemek, seçmek ve jQuery'de gizlemek olacaktır:

  temp = $('.list_group_item').hide()

  Şununla şablonun yeni bir örneğini ekledikten sonra

  $('.search').keyup(function() {
      $('.list-items').html(null);
  
      $.each(items, function(index) {
          $(this).append(temp.clone())
      });
  });

• Bir öncekiyle aynı, ancak şablonun orada kalmasını istemiyorsanız, ancak sadece javascript'te ise, .detach()gizlemek yerine ( test etmedim!) Kullanabilirsiniz .

  temp = $('.list_group_item').detach()

  .detach() verileri ve olayları canlı tutarken DOM'dan öğeleri kaldırır (.remove () bunu yapmaz!).

Çok iyi cevap dan DevWL yerel HTML5 kullanmayla ilgili şablon elemanı. OP'den gelen bu güzel soruya katkıda bulunmak için template, jQuery kullanarak bu öğenin nasıl kullanılacağına dair bir şeyler eklemek istiyorum , örneğin:

$($('template').html()).insertAfter( $('#somewhere_else') );

İçeriği templatehtml değildir, yalnızca veri olarak değerlendirilir, bu nedenle içeriği jQuery'nin yöntemlerine erişmek için bir jQuery nesnesine sarmalamanız gerekir.