Представления и добавление строк таблицы в backbone.js

0

Я пытаюсь создать код с использованием магистрали. Пользователь вводит текст в два поля Предмет и цена. Затем эта информация добавляется в таблицу и создает новую строку для каждой введенной пары входных данных.

Я создал шаблон для таблицы. Мой вопрос при создании моего представления, поскольку данные из текстовых полей элемента и цены нужно сортировать в соответствующие ячейки, как правильно добавить новые строки. Могу ли я просто взглянуть на строку? Или мне нужно сделать это для каждой ячейки?

 <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;
            },
  • 1
    попробуйте просмотреть этот образец скрипки jsfiddle.net/jrsalunga/EYWD7/4
  • 0
    Это действительно очень полезно, спасибо за пример
Показать ещё 1 комментарий
Теги:
html-table
underscore.js
backbone.js

1 ответ

2
Лучший ответ

Вы можете создать представление для всей строки. Для каждой строки вам понадобится модель строки с атрибутами 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) для каждой модели. Когда пользователь создает новый элемент, вы должны добавить модель в коллекцию и повторно отобразить таблицу.

Надеюсь это поможет.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню