Backbone.js – Nested Collections and Arrays

I have recently been wrestling with Backbone.js to get it to correctly parse nested collections. There are numerous ways you can do this including using the plugin Backbone Relational. However, if you just want to do it yourself without the plugin then this is the approach that I found worked for me….

I have a collection of models. Some of these models might contain a nested collection of the same models. In my JSON this is set up as an array. The issue I was getting was that it was remaining as an array and not getting parsed into the collection of models I wanted it to be. This was a problem because I was navigating through the data recursively and I wanted to be able to treat each model as a Backbone model and not just a plain old object.

My model class is called ShellMenuModel and my collection class is called ShellMenuCollection. The model attribute where the nested collection would live is called subMods. Here is the model code:-

Image

 

The key to solving this problem was using the initialize function to manually parse the collection. In this function we check to see if the subMods collection attribute exists, if it does exist then you instantiate a new collection and in the constructor pass in the subMods array. The collection then gets parsed into a collection and set up as the subMods attribute on the parent model.

Advertisements

7 comments so far

  1. Varun on

    Collection is not accessed from the Model , Collection is coming to be undefined

    • sambrick on

      Hi Varun,

      Have you defined your collection class before instantiating the new one?

      e.g. ShellMenuCollection = Backbone.Collection.extend({model: ShellMenuModel});

      Sam

  2. Varun on

    Yes , I have defined the collection before instantiating the new one.

    Regards,
    Varun

  3. sambrick on

    Can you send me a zip please or put it up on github, I’m happy to take a look…

    • Varun on

      I am using Keel Framework, which is on top of Backbone, yeah sure I will share it with you , I have nesting at very deep level

      ‘filters’: [{
      ‘text’: ‘abc’,
      ‘filters’: [{
      ‘text’: ‘def’,
      ‘filters’: [{
      ‘text’: ‘ghi’
      }]
      }]
      }]

      • sambrick on

        Hi Varun, the above code snippet doesn’t tell me anything about the collection or model class. I have also never heard of Keel. I’d need to see more of the code.

      • Varun on

        Hi Sam,

        The issue the due to requirejs that has been solved, it was issue of circular dependency in requirejs. Thanks for your urge of help.

        Regards,
        Varun


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: