Backbone.js click event not working consistantly

Question

I am working on a backbone.js application with rails api which provides the json as shown:

{
    "name": "dan brown",
    "genre": "fiction",
    "books": [{
        "title": "Da vinci Code",
        "price": "50"
    },
    {
        "title": "Some other name",
        "price": "45"
    }],

    "name": "Author1",
    "genre": "comedy",
    "books": [{
        "title": "asdfasdfdsf",
        "price": "50"
    },
    {
        "title": "asdfdsf name",
        "price": "45"
    }]
}

Todo: 1. TO display the list of authors on the left side of the page. 2. When the user clicks on the author, corresponding books should be displayed with a link to add_to_cart 3. Finally when the user clicks on the book, it should display more details about that book

Progress: 1. I am able to get the list of authors using backbone.js and display on the left side (authors.fetch()) 2. And i was able to get the books of that particular author to show up when user clicks.

Problem: Now When the user clicks on the AUTHOR1 for the first time it'll display the books of that author BUT after clicking on some other author, if the user clicks on the same Author1 again no books are displayed.. It seems user Backbone author model losing the click event after it's clicked once....And I want the to click event to persist on the authors...

WHAT TO DO ?

WHERE TO DO ?

Any Help and Suggestions are highly appreciated

In AuthorView

events: {
    "click .author": "select"
},

select: function() {
    this.collection.trigger('select', this.model);
    //console.log(this.model);
}

In BookListView:

this.collection.bind('add', this.renderBook);

this.book = this.options.book;

this.authors = this.options.authors;
this.authors.bind('select', this.queueBooks);

queueBooks: function(author) {
    this.collection.add(author);
}

I'm guessing that the problem lies in the queueBooks: method, when a model is added to the collection it fires a add event which then is used to render the books through renderBook callback...So i think if the model already exists in the collection it doesn't fire the add the event again thereby not rendering the books....How to solve this??????!!!!!!!!!!!!!!!

EDIT: As suggested by Derick-

this.authors = this.options.authors;
this.authors.bind('select', this.renderBooks);

This works perfectly BUT this way no add event is generated in the collection as no model is bieng added.....the reason i want the book models in the BookList collection is to have a filter on the booklist collection so that they can be filtered based on prices, and other criteria, Is there any way to implement these features?????????

Answer 1

I'm guessing that the problem lies in the queueBooks: method, when a model is added to the collection it fires a add event which then is used to render the books through renderBook callback...So i think if the model already exists in the collection it doesn't fire the add the event again thereby not rendering the books

That is correct. You can only add a model to a collection once. It will throw a JavaScript error when you try to add it the second time.

You already have everything you need in place, you're just listening to the wrong events and doing things in the wrong order. Instead of adding a model to the collection to display it, you need to listen to the select event of the model, and use that to display it.

this.authors = this.options.authors;
this.authors.bind('select', this.renderBook);