在backbone.js 中查看和追加表格行

Question

我正在尝试使用主干创建代码。用户将文本输入到项目和价格两个字段中。然后将此信息附加到表中，并为输入的每个输入对创建一个新行。

我已经为表格创建了一个模板。创建视图时的问题，因为项目和价格的文本字段中的数据需要分类到相应的单元格中，我如何正确附加新行。我可以只查看该行吗？还是我需要为每个单元格都这样做？

 <div id="container">
    <script id="grocery-list-template" type="text/template">
        <table>
        <thead>
            <tr>
            <th>Item</th>
            <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><%=something to get item%></td>
                <td><%=something to get the price%></td>
                <td></td>
                <td><button class="complete"></button><button class="remove"></td>
            </tr>
            </tbody>
        </table>
    </script>
</div>

这基本上是我想要做的，但我不知道如何指定行和单元格？我是否必须使用 tagname: td 为每个单元格创建一个视图，或者我可以只保留 tagname: tr 并将数据路由到适当的单元格中吗？我找到了一个示例，它只是使用 li 元素附加了一个列表，所以我试图将其中的一些内容调整到我的代码中

 var TableView = Backbone.View.extend({
            tagname: "tr",
            classname: "itemAndprice",
            template:_.template($("grocery-list-template").html()),
            render: function() {
                this.$el.html(this.template(this.model.toJSON()));
                this.$el.attr("id", this.model.id);
                if (this.model.get('done')) this.$el.addClass('done');
                $("#GroceryList").append(this.$el);
                return this;
            },

Answer 1

您可以为整行创建视图。对于每一行，您都需要一个带有item 和price 属性的行模型，您可以将它们传递给行视图的构造函数。这很像您代码中的TableView（除了我希望它被称为RowView，TableView 是一个不同的“父”视图）

鉴于您的模型包含 item 和 price 属性，row-view-template 应该包含

....
<td><%=item%></td>
<td><%=price%></td>
....

然后this.model.toJSON() 会给你一个带有item 和price 属性的哈希，这些属性将被传递到this.template，用相关值填充<%=item%> 和<%=price%>。

您也可以查看underscore's template function 了解更多信息。

但是请注意，行视图和表视图应该是两个不同的视图。从您的代码看来，您有一个适合表格视图的模板（它还包含不应存在的单行）和一个适合作为行视图的视图。

有两个视图，您将在表视图中传递行模型的collection，它将遍历集合并为每个模型添加行（视图）。当用户创建新项目时，您需要将模型添加到集合中并重新渲染表格。

希望这会有所帮助。