javascript - 将 Collection View 绑定(bind)到另一个 View

Question

我将backbone与backbone-rails gem一起使用，它有自己的模板和项目结构。

问题是它在一个 div 上放置了 4 个不同的 View ，所以我所做的是制作另一个 div，现在模型、显示、编辑 View 被分配给另一个 View ，基本上这样我就可以有一个列表页面左侧以及中间的所有其他内容。

问题是我现在无法重定向，因此当我更新或创建新的“注释”时， ListView 不会刷新。

ListView :

  Supernote.Views.Notes ||= {}



  class Supernote.Views.Notes.IndexView extends Backbone.View

  template: JST["backbone/templates/notes/index"]



   initialize: () ->

  @options.notes.bind('reset','change', @addAll)





 addAll: () =>

 @options.notes.each(@addOne)



 addOne: (note) =>

 view = new Supernote.Views.Notes.NoteView({model : note, collection: @options.notes})

  @$("li").append(view.render().el)



 render: =>

 $(@el).html(@template(notes: @options.notes.toJSON() ))

 @addAll()



 return this

编辑 View :

  Supernote.Views.Notes ||= {}



 class Supernote.Views.Notes.EditView extends Backbone.View

  template : JST["backbone/templates/notes/edit"]



 events :

  "submit #edit-note" : "update"



 update : (e) ->

  e.preventDefault()

  e.stopPropagation()



  @model.save(null,

  success : (note) =>

    @model = note

    window.location.hash = "/#{@model.id}"

   )



 render : ->

  $(@el).html(@template(@model.toJSON() ))



 this.$("form").backboneLink(@model)



 return this

Answer 1

事件就是您所需要的，当模型添加到集合中时(新注释)它会引发集合本身的 add 事件

所以在你的收藏中你可以捕获它并用它做一些事情。

var myCollection = Backbone.Collection.extend({
   //... whole lot of irrelevant stuff goes here :)
});

var myCollectionListView = Backbone.View.extend({

  initialize: function(){
    _.bindAll(this, 'onAdd');
    this.collection.bind('add', this.onAdd);
  }

  onAdd: function(m){
    // either re-render the whole collection
    this.render();

    // or do something with the single model
    var item = $('<li>' + m.get('property') + '</li>');
    $('#listview').append(item);
  }

});


var myItems = new myCollection({});
var listview = new myCollectionListView({ collection: myItems });

然后你就覆盖了“添加注释”(与你可以对 reset 或 remove 事件执行的操作完全相同，该事件处理使用新的列表重置集合模型，并从集合中删除模型)

假设您更新了一条注释，这应该使用相同的事件系统来完成，尽管可以使用 change 事件来实现。这里的技巧是，您的 ListView 不渲染模型元素本身，但 ListView 为每个模型创建一个模型 View 。在该模型 View (您将其称为 NoteView)中，您可以执行与上面相同的过程，并绑定(bind)到它自己的模型:

initialize: function() {
  this.bind('change', this.modelChanged);
},

modelChanged: function(m){
  // do something, re-render the view, or anything else...
}