主干:将模型从一个集合添加到另一个集合

Backbone: adding model from one collection to another

本文关键字：集合 一个 添加 另一个 模型 主干      更新时间：2023-09-26

这是我现在拥有的一般结构：

具有视图"A"的集合"A"

要添加模型，可以打开一个模态并从列表中进行选择。模态是它自己的视图"B"，绑定到它自己的集合"B"。视图"B"是在单击事件上从视图"A"实例化的。

我本来打算用"myParent"属性初始化视图"B"，所以当从集合B中选择模型时，我可以在视图B:中这样说

this.myParent.collection.add（newModel）.

我知道这会奏效，但这种耦合是不是太紧密了，不需要？这个有好的模式吗？我想让几个不同的事件和触发因素在不同的地方传播，但这似乎只是使事情复杂化，没有太多附加值。

我在一个应用程序中遇到了一个类似的问题，该应用程序在表中列出了一组可选模型。根据所选的模型，另一个视图需要确定向用户显示哪些按钮。

在这种情况下，我选择了事件驱动的方法。每次选择视图a中的模型时，我都会触发视图B侦听的事件，并将该模型添加到集合B中。

对于您的情况，可能看起来像这样：

// Your collection view.
var ViewA = Backbone.View.extend({
  
  initialize: function(){
    Backbone.Events.on('modelSelected', this.onModelSelected, this);
    this.listenTo(this.collection, 'add', this.renderList);
  },
                       
  onModelSelected: function(model){
    this.collection.add(model);
  }
  
  renderList: function(){
    // Draw your collection
  }
  
  // Do some clean up of events
  remove: function(){
    Backbone.Events.off('modelSelected', this.onModelSelected, this);
    Backbone.View.prototype.remove.call(this);
  }
  
});
  
  
// Modal View
var ViewB = Backbone.View.extend({
  
  initialize: function(){
    this.collection = new YourCollection();
    this.listenTo(this.collection, 'sync', this.renderCollection);
    this.collection.fetch();
  },
  
  render: function(){
    // Render your modal
    return this;
  },
  renderCollection: function(){
    // Render your collection
  },
    
  // 
  modalSubmit: function(){
    var model = this.getSelectedModel();
    Backbone.Events.trigger('modelSelected', modal);
    this.close();
  }
  
});

我应该注意到，这附带了一些注意事项。首先，我建议选择一个健壮的名称空间事件命名方案。这只是一个例子。其次，从initialize函数获取数据通常并不理想，但为了简洁起见，我省略了控制器的概念。

相关文章：