Geek Answers Handbook

Scaling js rendering leaves a view without events

All,

I create an application with Backbone JS and, according to my methodology, I run a server request to update my local storage on each hash check if the first search for the model is too old.

So, I am dealing with this.

(hashchange) -> 
  fetch model -> 
    (if model expired [eg: grabbed from LS], fetch again in background)
    render

In the view, I attached the change event to a model that points to rendering, so when this second request returns, the page just re-renders.

For you, gentlemen and ladies, I ask why, when the first page loads, all events work (click, etc.), but if the view is re-displayed, will they no longer be?

Some code to help you look through is a nested view with a nested query:

class ShowView extends Backbone.View
  template: +some template+
  initialize: ->
    this.render()
    @model.bind('change', this.render)

  render: ->
    $(@el).html(this.template(@model.toJSON())
    items = new ItemCollection
    @model.set(items: items, {silent: true})
    @$items = new ItemsView(collection: items, el: @$('#posts'))
    items.fetch()
    +displayPage @el+
    @

 class ItemsView extends Backbone.View
   template: +some template+
   initialize: ->
     @collection.bind('reset', this.render)

   render: =>
     @collection.each( (model) -> new ItemView(model: model))
     @

... another, I swear ...

 class ItemView extends Backbone.View
   template: +some template+
   events:
     'click .inner': 'showItem'

   initialize: ->
     this.render()

   render: ->
     $(@el).html(this.template(@model.toJSON()))
     @

All this was generalized, but the concept is the same.

, , .inner, .

? , , Events .

- -

ItemView:

<a class="inner">
  <img src="item/image.gif" />
  <h3><%= title %></h3>
  <p><%= description %></p>
</a>

showItem ItemView - :

showItem: ->
  window.location.hash = "#/posts/#{@model.id}/show"

, ItemView tagName "li", ItemView tagName - "ul", .

+5
2

:

this.delegateEvents();

.

+1

, , :

Backbone.View unbind Backbone.Events.

, , , , samve, DOM.

, , :

class ShowView extends Backbone.View
  template: +some template+
  initialize: ->
    this.render()
    @model.bind('change', this.render)

  render: ->
    $(@el).html(this.template(@model.toJSON())
    items = new ItemCollection
    @model.set(items: items, {silent: true})
    @$items.unbind() if @$items             # for the subview events
    items.fetch()
    @$items = new ItemsView(collection: items, el: @$('#posts'))
    this.delegateEvents()                   # For the current view events
    +displayPage @el+
    @

    unbind: ->
      super
      @$items.unbind() if @$items

class ItemsView extends Backbone.View
   template: +some template+
   initialize: ->
     @collection.bind('reset', this.render)

   render: =>
     @collection.each( (model) -> new ItemView(model: model))
     this.delegateEvents()                 # For the current view events
     @

Cheers,  Cbarton

0

More articles:


All Articles