How to set new model info in specific nested array of objects using Backbone?

Question

I have a simple contact form when submitted should set the values inside the contacts section of my model, I have done very little settings/saving on a model so I'm wondering if there is anything in particular to set to a specific part of the model?

JS Data to save (myNewContactObject)

{
  "name": "Joe Bloggs",
  "email": "[email protected]",
  "telephone": "0123456789"
}

Should save to nested contacts array of model, example structure:

[
  {
    "id": 1,
    "name": "model name",
    "teams": [
      {
        "name": "team one name"
      },
      {
        "name": "team two name"
      }
    ],
    "contacts": [
      {
        "name": "James Smith",
        "email": "[email protected]",
        "telephone": "18917391847"
      }
    ]
  }
]

Can I literally just do this.model.set(myNewContactObject)? or do I need to do something like this.model.contacts.set(myNewContactObject)?

Or, maybe this approach is wrong and I should be making a collection out of the contacts like ContactsCollection and setting each ContactModel each time?

stolli · Accepted Answer · 2015-08-24 22:24:48Z

Backbone's Model.set has the following syntax:

this.model.set('attribute-name', 'attribute-value')

So to set the attribute "contacts" to your complex array object, you would do something like:

var contacts = this.model.get('contacts');
contacts.push(myNewContactObject);

Note in this case, since arrays are passed by-reference in JavaScript, there is no need to make a contacts.set call; the .get() call returns a reference through which you mutate the contacts array directly. However, if you built a new array:

var newContacts = [myNewContactObject];

You need to set it like so:

this.model.set('contacts', newContacts);

Note that the attribute you wish to modify is passed as an argument, not referenced as a property of the model, so the this.model.contacts.set syntax you mention will not work in any case.

Keep in mind that Backbone will let you set a complex object as the value of the attribute, but it will not help you mine that attribute to arbitrary depth. To do something like that, you need a Backbone plugin like backbone-deep-model, which can be installed with both npm install and bower install. This would allow you to this:

this.model.get('contacts.0.name')

Without something like this, you can only do:

this.model.get('contacts') and then parse out the contact/property you want yourself.

You could also do as you mention, and create a collection of contacts, but this largely depends on how you plan on modeling your data in your backend. If you have a relational API setup on the back-end, something like api/v1/persons/<person-id>/contacts, then you may want to create contact collections with that URL and have a related collection for each person. In this case, yes, each contact object in your array would actually be it's own model, and your 'array' would really be a Backbone.Collection. Whether this is the correct approach depends on your modeling.

If you are interested in doing this, you may want to look into backbone-relational, although the concept of doing relational data with Backbone is an area of some debate.

Collectives™ on Stack Overflow

How to set new model info in specific nested array of objects using Backbone?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related