Question

我正在使用backbone-rails gem来生成自己的模板和项目结构。

问题是它在一个div上放了4个不同的视图，所以我所做的是另一个div，现在模型，显示，编辑视图被分配给那个其他视图，基本上所以我可以有一个列表页面的左侧和中间的其他所有内容。

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

列表视图：

  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

修改视图：

  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事件。这里的技巧是，您的列表视图不会呈现模型元素本身，但列表视图会为每个模型创建模型视图。在该模型视图中（您称之为NoteView），您可以执行与上述相同的过程，并绑定到它自己的模型：

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

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

将集合视图绑定到另一个视图

1 个答案: