Изменение HTML-кода jQuery-шаблона перед добавлением в DOM - PullRequest
Новая
       10

Изменение HTML-кода jQuery-шаблона перед добавлением в DOM

3 голосов
/ 11 ноября 2010

У меня проблема с использованием jQuery-шаблона так же, как и с обычным DOM-объектом jQuery.Мне нужно изменить HTML, созданный функцией шаблона, прежде чем добавлять его в DOM.
Комментарии в моем примере ниже объясняют, что я хочу сделать, а что нет. 

 <script id="movieTemplate" type="text/x-jquery-tmpl">
  <tr class="week_${week}">
   <td colspan="6">Vecka: ${week}</td>
  </tr>
  <tr class="detail">
   <td>Kund: ${customer}</td>
   <td>Projekt: ${project}</td>
   <td>Tidstyp: ${time_type}</td>
   <td>Datum: ${date}</td>
   <td>Tid: ${quantity}</td>
   <td>Beskrivning: ${description}</td>
  </tr>
 </script>


 <script type="text/javascript">
  var movies = [
    { customer: "SEMC", project: "Product catalogue", time_type: "Programmering", date: "2010-11-08", quantity: 2, description: "buggar", week: 45 },
    { customer: "SEMC", project: "Product catalogue", time_type: "Programmering", date: "2010-11-09", quantity: 3, description: "buggar igen", week: 45 }
  ];
  $("#movieTemplate").tmpl(movies).appendTo("#movieList");

  $("#btnAdd").click(function () {
   //hash with data
   var data = { customer: $("#clients").val(), project: $("#projects").val(), time_type: $("#timeTypes").val(), date: $("#date").val(), quantity: $("#quantity").val(), description: $("#description").val(), week: $("#week").val() }

   //do the templating
   var html = $("#movieTemplate").tmpl(data).find(".week_" + data.week).remove().appendTo("#movieList");
            console.log(html.html()); //Returns null. WHY?!

            var html = $("#movieTemplate").tmpl(data).appendTo("#movieList");
   console.log(html.html()); //Returns the first <tr> only. But appends the full html correctly
   return false;
  });
 </script>

1 Ответ

2 голосов
/ 11 ноября 2010

Вы добавляете элемент, который вы удалили, если вы хотите удалить элемент, затем добавьте то, что осталось, вам нужно использовать .end(), чтобы вернуться в цепочку, например: 

var html = $("#movieTemplate").tmpl(data).filter(".week_" + data.week).remove()
                                         .end().appendTo("#movieList");

В настоящее время вы вызываете .html() для этой удаленной строки, поскольку обе строки находятся на корневом уровне вашего объекта и .html() возвращает содержимое первый соответствующий элемент.

Лучшей альтернативой в целом было бы возиться с ней после того, как она благополучно окажется в DOM, например: 

var html = $("#movieTemplate").tmpl(data).appendTo("#movieList")
                              .filter(".week_" + data.week).remove();

Вы можете проверить это здесь .

...