CODEWITHSUNDEEP
javascriptruby-on-railsbackbone.jscoffeescript
user901790
user901790

Reputation: 319

bind a collection view to another view

I'm using backbone with the backbone-rails gem which does its own templating and project structure.

The problem is that it puts 4 different views on one div, so what i've done is made another div and now the model, show,edit views are assigned to that other view, basically so i can have a list on the left side of the page and everything else in the middle.

The problem is that i can't redirect now, so when i update or create a new 'note' the list view does not refresh.

List View: 

  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

Edit 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

Upvotes: 0

Views: 420

Answers (1)

Sander
Sander

Reputation: 13431

Events is what you need, when a model is added to a collection (new note) it raises the add event on the collection itself

so in your collection you can catch that and do something with it.

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 });

then you have the 'add note' covered, (the exact same you could do for the reset or remove event which handle resetting the collection with a new list of models, and deleting a model from the collection )

let's say you update a note, this should be done with the same event system, though the change event could be used for that. the trick here is, your list view renders not the model elements itself, but the list view creates a modelview for every model. in that modelview (you called it NoteView) you could do the same process as above, and bind to it's own model:

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

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

Upvotes: 2

Related Questions