javascript - backbone.js 中的 View 和附加表行

Question

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

我已经为表格创建了一个模板。创建 View 时我的问题是，由于项目和价格的文本字段中的数据需要排序到相应的单元格中，如何正确附加新行。我可以只查看该行吗？或者我需要为每个单元格执行此操作？

 <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 为每个单元格创建 View ，或者我可以只保留 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

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

假设您的模型包含 item和price属性，行 View 模板应包含

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

然后this.model.toJSON()会给你一个散列 item和price将传递到 this.template 的属性，正在填充<%=item%>和<%=price%>与相关值。

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

但请注意，行 View 和 TableView 应该是两个不同的 View 。从您的代码来看，您似乎有一个适合 TableView 的模板(其中还包含不应该存在的单行)和适合作为行 View 的 View 。

有两个 View ，您将通过 collection TableView 中的行模型将迭代集合并为每个模型添加行( View )。当用户创建新项目时，您需要将模型添加到集合中并重新渲染表格。

希望这有帮助。