Я пытаюсь создать код с использованием магистрали. Пользователь вводит текст в два поля Предмет и цена. Затем эта информация добавляется в таблицу и создает новую строку для каждой введенной пары входных данных.
Я создал шаблон для таблицы. Мой вопрос при создании моего представления, поскольку данные из текстовых полей элемента и цены нужно сортировать в соответствующие ячейки, как правильно добавить новые строки. Могу ли я просто взглянуть на строку? Или мне нужно сделать это для каждой ячейки?
<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>
Это, по сути, то, что я пытаюсь сделать, но я не знаю, как указать строку AND ячейку? Должен ли я делать представление для каждой ячейки с помощью тэга: td или я могу просто сохранить тэг: 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;
},
Вы можете создать представление для всей строки. Для каждой строки вам понадобится модель строки с атрибутами item
и price
которые вы передадите в конструктор строки -view. Это в значительной степени похоже на TableView
в вашем коде (кроме того, я бы ожидал, что вместо него будет назван RowView
а TableView
будет другим, родительским)
Учитывая, что ваша модель содержит атрибуты item
и price
, строка -view -template должна содержать
....
<td><%=item%></td>
<td><%=price%></td>
....
Тогда this.model.toJSON()
даст вам хэш с атрибутами item
и price
которые будут переданы в this.template
, this.template
<%=item%>
и <%=price%>
соответствующими значениями.
Вы также можете взглянуть на функцию шаблона подчеркивания для получения дополнительной информации.
Обратите внимание, однако, что строка -view и таблица -view должны быть двух разных видов. Из вашего кода кажется, что у вас есть шаблон, подходящий для таблицы -view (который также содержит одну строку, которая не должна быть там), и представление, соответствующее строке -view.
Имея два представления, вы передадите коллекцию моделей строк в таблице -view, которая будет перебирать по коллекции и добавлять строку (-view) для каждой модели. Когда пользователь создает новый элемент, вы должны добавить модель в коллекцию и повторно отобразить таблицу.
Надеюсь это поможет.