在添加到DOM之前更改jQuery模板的HTML

我有一個問題，就像正常的jQuery DOM對象一樣使用jQuery模板。在將它附加到DOM之前，我需要更改由模板函數創建的HTML。
我在下面的示例中的註釋解釋了我想要做什麼，以及出了什麼問題。在添加到DOM之前更改jQuery模板的HTML

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

來源

2010-11-11 Frexuz

要追加你刪除的元素，如果要刪除，則元素追加還剩下些什麼，你需要使用.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();

You can test it out here。

來源

2010-11-11 11:12:53

在添加到DOM之前更改jQuery模板的HTML

回答

相關問題