試圖追加到與骨幹

Question

我試圖將追加到表中創建表創建通過骨幹網使用以下模板：

<script type='text/template' id='production-budget-template'> 
     <table class='table striped'> 
      <thead> 
       <tr> 
        <th>Task ID</th> 
        <th>Description</th> 
        <th>Projected Budget</th> 
        <th>Actual Spend</th> 
        <th>Delta Spend</th> 
       </tr> 
      </thead> 
      <tbody> 
       <% _.each(budgetList, function(todo) { %> 
        <tr> 
         <td class="<%= todo.get('statusCheck') %>"><%= todo.get('taskID')%></td> 
         <td class="<%= todo.get('statusCheck') %>"><%= todo.get('description')%></td> 
         <td class="<%= todo.get('statusCheck') %>"><%= todo.get('budget')%></td> 
         <td><%= todo.get('actualSpend')%></td> 
         <td><%= todo.get('actualSpend') =='0' ? '0' : todo.get('actualSpend') - todo.get('budget') %> 
        </tr> 
       <% }); %> 
      </thead> 
     </table> 
    </script> 

我目前遍歷集合創建一些「三角」和和值對於不同的列，並且希望將它們追加到表格中，以相同的格式顯示與現有模板內嵌​​的值。下面是迭代器：

var totalActual = 0; 
var totalDelta = 0; 
var totalProjected = 0; 

var budgetLister = new BudgetList(); 
budgetLister.fetch({ 
    success: function(){ 
    _.each(budgetLister.toJSON(), function(budgetItem){ 
     totalProjected += parseInt(budgetItem['budget']); 
     totalActual += parseInt(budgetItem['actualSpend']); 
     totalDelta += (parseInt(budgetItem['actualSpend']) == 0 ? 0 : (parseInt(budgetItem['actualSpend']) - parseInt(budgetItem['budget']))); 
    }); 
    } 
}); 

如何我想補充一點作爲新行與新的值作爲新的數據表中創建之後呢？我試圖用一個簡單的jQuery附加到el，但這不起作用。

Answer 1

有幾種方法可以解決這個問題。

你說你嘗試過「一個簡單的jQuery附加到el，但這不起作用」。您的代碼示例中未包含Backbone視圖，但Backbone視圖或者管理現有元素（直接渲染到該元素）或創建一個新元素（您可以隨意使用）。無論哪種方式，您的表不是視圖管理的元素。因此，像this.$el.append(total_tr)這樣的東西不會起作用 - 它會將新的<tr>附加到容器。這不會是你的<table>元素，所以我會期待一些奇怪的行爲。

你可以建立一個新的<tr>，並通過使用jQuery選擇與this.el追加它作爲一個背景：

$('table', this.el).append("<tr><td>My</td><td>New</td><td>Row</td></tr>"); 

舉例來說，如果你知道，只有將是一個表中的元素管理通過您的骨幹視圖，你可能會使您的渲染方法是這樣的：

BudgetView = Backbone.View.extend({ 
    el: 'div#production-budget-container', 
    template: _.template($('#production-budget-template').html()), 
    render: function() { 
     this.$el.html(this.template({budgetList: this.collection})); // Render the template without totals. 

     // Calculate totals here 

     var totalRow = "<tr><td>" + totalProjected + "</td><td>" + totalActual + "</td><td>" + totalDelta + "</td></tr>"; 
     $('table', this.el).append(totalRow); 
     return this; // Backbone convention 
    }, 
}); 

---

另一種方法是計算你的托特直接在您的模板中。強調模板可以包含任意JavaScript，所以你可以寫這樣的事情：

<script type='text/template' id='production-budget-template'> 
    <table class='table striped'> 
     <!-- thead omitted for brevity --> 
     <tbody> 
      <% var totalProjected = 0; var totalActual = 0; var totalDelta = 0; %> 
      <% _.each(budgetList, function(todo) { %> 
       <% totalProjected += parseInt(todo.get('budget')) %> 
       <% totalActual += parseInt(todo.get('actualSpend')) %> 
       <tr> 
        <!-- Rendering the actual todo data omitted for brevity --> 
       </tr> 
      <% }); %> 
      <tr> 
       <td><%= totalProjected %></td> 
       <td><%= totalActual %></td> 
       <td><%= totalDelta %></td> 
      </tr> 
     </thead> 
    </table> 
</script> 

---

最後，作爲一個文體/封裝說明，我想移動parseInt和計算輔助功能上的骨幹機型，所以你可以簡單地在你的模板/迭代器中調用todo.getTotalDelta()。他們會更容易閱讀這種方式。