Question

I’m having an issue that I think is simple to diagnose, but I can’t seem to get it on my own.

I have the following abbreviated Backbone code written in CoffeeScript:

events = FD.Events # collection

# instantiated on page load with collection: events
class FD.StreamView extends Backbone.View

el: $(".stream")

initialize: ->
    # Bind the view to listen for a reset of the collection and rerender
    @collection.on("reset", @render)

    # Listen for a change to this model and run the function getActivities
    FD.filters.on("change", @getActivities)

render: =>
    # render function code

getActivities: =>
    # create a new instance of the FD.Events collection class
    events = new FD.Events

    # create a new instance of this view, passing in the new empty collection
    streamView = new FD.StreamView collection: events, model: FD.filters

    # make an AJAX call and as a part of the callback function, reset the collection
    # for the view we just instantiated above
    params = FD.filters.attributes
    callbackFunc = (responseText) ->
        json = $.xml2json(responseText)
        activities = json.activity
        events.reset activities
    params = FD.filters.attributes
    activities_json = $.get("/landing/Data", params, callbackFunc)  

The problem, as you might see, is that the getActivities function runs double the amount of times each time the collection is called, because the first time it runs it creates a second view and then both of those run. When the collection changes, each of those two instances create two instances, so we have four now, and all four run getActivities. Then 8 and then 16.

Clearly making a new instance of the FD.StreamView class isn’t the right approach, but I don’t know how to reset the collection that the single view is tied to, and how that can then trigger the bound @render function.

Any idea? Please let me know if I’m missing critical information. Thanks in advance.

Michael

Answer 1

The structure you want is to just bind the view’s render to the collection’s events as you have for reset and maybe add/remove as well depending on the specifics of your application. However, getActivities should simply tell the collection to fetch data via the fetch method, but using the current set of filters (which I assume is a search query). So add an instance property called filters to your collection class, in getActivities do events.filters = FD.filters and then just events.fetch(). When the response arrives the collection will reset, which will fire an event which will cause render() to execute and voila, your view will be up to date. The code you have in render() that is making an ajax request belongs in a collection, not a view.