Views and appending table rows in backbone.js

Question

I am trying to create a code using backbone.The user inputs text into two fields Item and price. This info then is appended to a table and creates a new row for every input pair entered.

I've created a template for the table. My question when creating my view since the data from the text fields of item and price need to be sorted into the corresponding cells, how do I append the new rows correctly. Can I just make a view for the row? Or do I need to do it for each cell?

 <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>

This is essentially what Im trying to do, but I dont know how to specify the row AND the cell? Do I have to make a view for each cell using tagname: td or can I just keep tagname: tr and route the data into the apropriate cells? I found an example that just appended a list using li elements so I was trying to adapt some of it to my code

 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

You can create a view for the whole row. For each row you would need a row-model with item and price attributes which you would pass into the row-view's constructor. This pretty much looks like the TableView in your code (except I would expect that to be called RowView instead, the TableView being a different, 'parent' view)

Given that your model contains item and price attributes, the row-view-template should contain

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

Then this.model.toJSON() would give you a hash with item and price attributes which would be passed into this.template, populating <%=item%> and <%=price%> with the relevant values.

You can also take a look at underscore's template function for further information.

Note however that the row-view and the table-view should be two different views. From your code it seems that you have a template appropriate for a table-view (which also contains a single row that shouldn't be there) and a view appropriate as a row-view.

Having two views you would pass a collection of row-models in the table-view which would iterate over the collection and add a row(-view) for each model. When the user creates a new item you'd add a model into the collection and re-render the table.

Hope this helps.