Backbone js, Обновить представление об изменении модели

Ответ 1

Вам не хватало нескольких вещей.

Шаблон строки должен отображать только одну строку. Шаблон таблицы повторяет его в collection.each().
Вам нужно указать, к какой модели был привязан вид. Теперь, когда модель изменена, View "прослушивает" это событие и запускает его действие рендеринга. Обратите внимание, что вы не указали модель, но auto коллекции создает модель для каждого элемента в массиве данных, который он передал.
Вы пытались использовать setElement для рендеринга представления. Рендеринг так же прост, как передать ваш HTML-шаблон в объект jQuery, который автоматически создается с помощью представления (это. $el в коде ниже).

<html>
    <script src="./jquery.js"></script>
    <script src="./underscore.js"></script>
    <script src="./backbone.js"></script>
    <style>
        table,
        td {
            border: 1px solid #000;
        }
    </style>
    <body></body>
    <script>
        var rowTemplate = "<tr><td class='name'><%= name %></td><td class='age'><%= age %></td></tr>";

        var data = [
                {
                    'name': 'Bert',
                    'age' : 6
                }, {
                    'name': 'Ernie',
                    'age' : 7
                }
            ];

        /** Collection of models to draw */
        var peopleCollection = new Backbone.Collection(data);

        /** View representing a table */
        var TableView = Backbone.View.extend({
                tagName: 'table',
                initialize: function () {
                    _.bindAll(this, 'render', 'renderOne');
                    if (this.model) {
                        this.model.on('change', this.render, this);
                        console.log(this.model);
                    }
                },
                render: function () {
                    this.collection.each(this.renderOne);
                    return this;
                },
                renderOne: function (model) {
                    var row = new RowView({
                            model: model
                        });
                    this.$el.append(row.render().$el);
                    return this;
                }
            });

        /** View representing a row of that table */
        var RowView = Backbone.View.extend({
                events: {
                    "click .age": function () {
                        console.log(this.model.get("name"));
                    }
                },
                initialize: function () {
                    this.model.on('change', this.render, this);
                },
                model: peopleCollection.models,
                render: function () {
                    var html = _.template(rowTemplate, this.model.toJSON());
                    this.$el.html(html);
                    return this;
                },
            });

        var tableView = new TableView({
                collection: peopleCollection
            });
        $("body").append(tableView.render().$el);

        console.log(peopleCollection.models[0].set({
            'name': 'Statler',
            'age' : 100
        }));
        console.log(peopleCollection.models[0]);
    </script>
</html>

Ответ 2

Вам нужно привязать ваше представление к изменению модели. Я предполагаю, что вы хотите обновить RowView при обновлении строки. Я переписал ваш RowView. Теперь вы будете слушать изменения модели.

var RowView = Backbone.View.extend({  
         events: {
             "click .age": function() {console.log(this.model.get("name"));}
         },
         initialize: function(){
           this.model.on('change', this.render, this);
         },
         render: function() {
             var html=_.template(rowTemplate,this.model.toJSON());
             this.setElement( $(html) );
             return this;
         },

         update : function() {

         }
     });

Ответ 3

Поскольку ваш TableView.initialize обращается к this.model, но вы передаете его вместо collection?

Backbone js, Обновить представление об изменении модели

Ответы

Ответ 1

Ответ 2

Ответ 3