10

为什么我的视图没有更新？

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

3 回答 3

16

你错过了一些东西。

  • 行模板应该只呈现一行。Table 模板在 collection.each() 中重复它。
  • 您需要指定视图绑定到哪个模型。现在，当模型改变时，视图“监听”那个事件并触发它的渲染动作。请注意，您没有指定模型，但集合会自动为其传递的数据数组中的每个元素创建一个模型。
  • 您试图使用 setElement 来呈现视图。渲染就像将模板的 HTML 传递给视图自动创建的 jQuery 对象一样简单（this.$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>
于 2013-05-16T16:26:15.703 回答
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() {

         }
     });
于 2013-05-16T15:46:48.057 回答
1

因为您的 TableView.initialize 正在访问this.model但您正在传递它collection？

于 2013-05-16T15:25:45.143 回答