Backbone.js 将模型集合绑定到表

所以我今天第一次开始研究backbone.js。我最想做的事情之一就是将模型属性绑定到有用的控件上。我的问题实际上是如何将各个模型属性绑定到控件

我举了一个例子，在这个例子中，您可以将任何模型的集合绑定到一个表，选择要忽略的属性，但是我觉得我没有采取正确的方法。我们的想法是最终扩展它，使表像数据网格一样可编辑。我已将此添加到JSFiddle@

我使用助手函数为模型生成模板。这用于生成表格标题和行数据

 //helper function to loop through a model's attributes choosing which to ignore
 function LoopAtts(model,func,ignore){
     //calls func on each unignored model attribute
  }

这是我用来说明示例的基本模型

var Person = Backbone.Model.extend({
defaults: function() {
  return {
       firstName: "N/A",
   lastName:"N/A",
   score:function(){
    return 0;
   }
  };
},        
});

这是我用来打印模型单元格数据的视图，它在属性更改时侦听，现在只将html设置为更新值。

var RowView = Backbone.View.extend({
  tagName: "tr",
  className: "rowView",
  initialize: function() {
    var cells = LoopAtts(this.model,CellTemplate,this.options.ignore);
    this.listenTo(this.model, "change", this.change);
    this.$el.html(_.template(cells)(this.model.attributes));
  },
  change:function(e){
console.log(e);
for(p in e.changed)
{
    if(e.changed.hasOwnProperty(p))
    {
        //handle update of cell
        this.$el.find("#"+p).html(this.model.attributes[p]);
    }
}

 }
});

var TableView = Backbone.View.extend({
    defaults: {noData:'<tr><td>No Data</td></tr>'},
    tagName: "table",
    firstTime: true,
    initialize: function() {
    this.listenTo(People, 'add', this.addOne);
    this.listenTo(People, 'reset', this.addAll);
    this.$el.html(this.noData);
  },      
addOne: function(o) {
  //singleton for table data
  if(this.firstTime)
  {
    var headers = LoopAtts(o,HeaderTemplate,this.options.ignore)
    this.$el.html(_.template(headers)(o.attributes));
    this.firstTime = false;
  }
  //assign view to model and append it to the table
  var view = new RowView({model: o,ignore:this.options.ignore});
  this.$el.append(view.render().el);
},
addAll: function() {
  this.model.models.each(this.addOne, this);
}
})

这是一个用于绑定到集合的视图，在将元素添加到集合时添加行视图。

var RowView = Backbone.View.extend({
  tagName: "tr",
  className: "rowView",
  initialize: function() {
    var cells = LoopAtts(this.model,CellTemplate,this.options.ignore);
    this.listenTo(this.model, "change", this.change);
    this.$el.html(_.template(cells)(this.model.attributes));
  },
  change:function(e){
console.log(e);
for(p in e.changed)
{
    if(e.changed.hasOwnProperty(p))
    {
        //handle update of cell
        this.$el.find("#"+p).html(this.model.attributes[p]);
    }
}

 }
});

var TableView = Backbone.View.extend({
    defaults: {noData:'<tr><td>No Data</td></tr>'},
    tagName: "table",
    firstTime: true,
    initialize: function() {
    this.listenTo(People, 'add', this.addOne);
    this.listenTo(People, 'reset', this.addAll);
    this.$el.html(this.noData);
  },      
addOne: function(o) {
  //singleton for table data
  if(this.firstTime)
  {
    var headers = LoopAtts(o,HeaderTemplate,this.options.ignore)
    this.$el.html(_.template(headers)(o.attributes));
    this.firstTime = false;
  }
  //assign view to model and append it to the table
  var view = new RowView({model: o,ignore:this.options.ignore});
  this.$el.append(view.render().el);
},
addAll: function() {
  this.model.models.each(this.addOne, this);
}
})

var TableView=Backbone.View.extend({
默认值：{noData:'No Data'}，
标记名：“表”，
第一次：是的，
初始化：函数（）{
this.listenTo（人，'add'，this.addOne）；
this.listenTo（人员，'reset'，this.addAll）；
this.el.html（this.noData）；
},      
addOne：函数（o）{
//表数据的单例
如果（这是第一次）
{
var headers=LoopAtts（o，HeaderTemplate，this.options.ignore）
这个.el.html（u.template（headers）（o.attributes））；
this.firstTime=false；
}
//将视图指定给模型并将其附加到表中
var view=newrowview（{model:o，ignore:this.options.ignore}）；
这是.el.append（view.render（）.el）；
},
addAll:function（）{
this.model.models.each（this.addOne，this）；
}
})

对于列表视图渲染，我建议您看看如何解决这些问题，在代码中消除列表生成样板文件。

具体来说，我会看看木偶的复合视图（请参阅）和项目视图。（见附件）。显示如何构建html表。另请参阅，以获取有关如何使用木偶的复合视图创建表的文章。