Question

为什么我的观点没有得到更新？

    <html>

     <script src="./jquery.js"></script>
     <script src="./underscore-min.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><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td><td class='name'><%= name %></td><td class='age'><%= age %></td></tr>";

     /** 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"));}
         },

         render: function() {
             var html=_.template(rowTemplate,this.model.toJSON());
             this.setElement( $(html) );
             return this;
         },

         update : function() {

         }
     });

     var data = [
         {'name': 'Oli', 'age': 25},
         {'name': 'Oli', 'age': 25},

         ];

     /** Collection of models to draw */
     var peopleCollection = new Backbone.Collection(data);
     var tableView = new TableView({collection: peopleCollection});
     $("body").append( tableView.render().$el );

     console.log(peopleCollection.models[0].set({'name': 'VJY', 'age': 25}));
     console.log(peopleCollection.models[0]);

     </script>

     </html>

Answer 1

你错过了一些东西。

行模板应该只呈现一行。 Table模板在collection.each（）中重复它。
您需要指定View绑定的模型。现在，当模型更改时，View“侦听”该事件并触发其渲染操作。请注意，您没有指定模型，但集合会自动为传递的数据数组中的每个元素创建一个模型。
您正在尝试使用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>

Answer 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() {

         }
     });

Answer 3

因为您的TableView.initialize正在访问this.model，但您传递了collection而不是？

骨干js，更新模型更改视图

3 个答案: