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>

我目前正在遍历该集合以创建一些＆＃34; delta＆＃34;并且对不同列的值求和，并希望将它们附加到表中，以相同的格式显示与现有模板内联的值。这是迭代器：

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>并使用带有this.el的jQuery选择器作为上下文附加它：

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

例如，如果你知道在Backbone视图管理的元素中只有一个表，你可以使你的渲染方法像这样：

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()即可。他们会更容易阅读。

试图附加到使用Backbone创建的表

1 个答案: