javascript - 尝试追加到使用 Backbone 创建的表

Question

我正在尝试通过 Backbone 附加到使用以下模板创建的表:

<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 View ，但 Backbone View 要么管理现有元素(直接渲染到其中)，要么创建新元素(您可以根据需要使用)。无论哪种方式，您的表都不是 View 管理的元素。因此，类似于 this.$el.append(total_tr)不起作用 - 它正在附加您的新 <tr>到容器。那不会是你的<table>元素，所以我预计会出现一些奇怪的行为。

您可以构造一个新的 <tr>并使用带有 this.el 的 jQuery 选择器附加它作为上下文:

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

例如，如果您知道 Backbone View 管理的元素中只会有一个表，则可以将渲染方法设置为如下所示:

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以及 Backbone 模型上辅助函数的计算，因此您只需调用 todo.getTotalDelta()在你的模板/迭代器中。这样它们会更容易阅读。