0

我与 Backbone Relational 建立了模型关系,其中 anItem属于Column. 项目添加到列中效果很好,但是如何引用项目的现有视图,以便将其从旧列中删除?(因此,项目当前跨列重复。)

请参阅此 JSFiddle - http://jsfiddle.net/geVPp/1(我认为代码需要在ColumnView removeItem事件处理程序中实现,但我可能错了)。

(示例实例位于脚本的底部,因为我还没有 UI 控件。)

这是小提琴中的 ColumnView:

var ColumnView = Backbone.View.extend({
className: 'column',
tagName: 'div',
template: Handlebars.compile($('#column-template').html()),
initialize: function() {
  _.bindAll(this, 'render', 'renderItem', 'removeItem');
  this.model.bind('change', this.render);
  this.model.bind('reset', this.render);
  this.model.bind('add:items', this.renderItem);
  this.model.bind('remove:items', this.removeItem);
},
render: function() {
  return $(this.el).html(this.template(this.model.toJSON()));
},
renderItem: function(item) {
  var itemView = new ItemView({model: item});
  this.$('.items').append($(itemView.render()));
},
removeItem: function(item) {
  // @todo -- How do I reference the item model's view, in order to remove the DOM element?
}
});
4

1 回答 1

0

不幸的是,Backbone 没有内置方式;您必须手动跟踪您的子视图(以及它们映射到的模型)。

Backbone.Marionette有一个 CollectionView 类,可以为您自动执行此操作。或者你可以推出自己的类似于UpdatingCollectionView

如果您想要快速修复,您可以保留对视图的引用作为模型对象的变量,但这很糟糕,因为它会阻止您显示同一模型的多个视图。

于 2012-07-17T23:59:40.330 回答