0

I'm just starting out with backbone and using the boilerplate ( https://github.com/tbranyen/backbone-boilerplate ). My application is divided into the 3 columns: a fixed navigation list, a list of items and a detail view. When a navigation link is clicked I load the middle column with a collection of items. The next step is to show a detail view when one of the items (a model in the collection) is clicked.

I cannot seem to get the detail view to render. I initialize the detail view in the list view and then have a pubSub setup in the detail view so that when a model is clicked I can call the detail view. However when I try to render the view I get a "Uncaught RangeError: Maximum call stack size exceeded".

Relevant code: http://pastebin.com/C88ezty7

I can't seem to see why the detail view is not able to render.

Can anyone point me in the right direction?

Phipps73
  • 71
  • 3
  • I think we still more code that the one you are showing. This issue shouldn't be difficult to catch just add a few `console.log` and see which method is been called recursively. – fguillen Sep 01 '12 at 08:58
  • Thanks, fguillen, I have been adding console.logs in various places but can't seem to see the problem. I have updated the pastebin to hopefully clarify the setup - http://pastebin.com/pg1wYcwB I'm new to all things backbone so not sure how much extra info to include. – Phipps73 Sep 02 '12 at 19:57
  • 1
    Sorry @Phipps73, I don't find anything that jumps in my eyes. My last proposition is to try to remove as much code as possible until you come up with the minimal code that reproduces the issue, then you can create a _jsFiddle_ that reproduces the issue so we can play with it. You can fork my [Backbone playground](http://jsfiddle.net/fguillen/Ryd5U/). – fguillen Sep 02 '12 at 20:29
  • Thanks for looking into. I will strip back what I have and then fork your _jsFiddle_ to see if I can get to the bottom of the problem. – Phipps73 Sep 03 '12 at 16:43

1 Answers1

0

I seem to have fixed the above issue. Possibly not in the correct way but it is now working as I would expect. I added this to my View Item (model):

showDeanery: function(ev) {
    deaneryid = this.model.get('deaneryid');
    //we should load the detail view from here
    console.log('load deanery: '+deaneryid);
    $(".startpage").empty();
    $(".detailcontainer").removeClass('startpage');
    app.layout.insertView('.detailcontainer',new Views.Detail({
            model:this.model
    }),true).render();
}

I am hoping that calling views from within another view is 'ok'. Now just need to work out how to load this via the router!!

Phipps73
  • 71
  • 3