Models in Backbone.js

Question

I have a question about handling my models. I get all confused. When I load the page I get a JSON string from rails containing "events" these events have in turn one user, multiple participants, multiple payments and multiple comments, these comments, have in turn one user, and the payments have multiple users and a single user. The comments and payments also have an event pointing back att the parent.

Events
  User
  Participants(users)
  Payments
    User
    Users
    Event
  Comments
    User
    Event

Okey, so the question is: Should I load everything as a tree, with full attributes everywhere:

"events": {
  "id": "event_1",
  "user": {
    "id": "user_1", "name":"name"
  }, "participants": [
    {"id": "user_1", "name":"name"},
    {"id": "user_2", "name":"name"}
  ], "payments": [{
      "id":"payment_1",
      "user": {
        "id": "user_1", "name":"name"
      },"users": [
        {"id": "user_1", "name":"name"},
        {"id": "user_2", "name":"name"}
      ], "event": {root event object}  
    }], "comments": [{
      "id": "comment_1",
      "user": {
        "id": "user_1", "name":"name"
      }, "event": {root event object}  
    }]
  }
}

And then have the events model, to create new comments, payments and users, and assign it to it's own event, or is it a better idea to load every event, user payment and comment into separate variables, and then use the variable to get the models. It is quite hard to explain, so feel free to ask if I need to clarify something.

Conclusion: Should I let the event model handle the creation of all the nested objects, or is there some better way to handle this, and have access to the models more globaly?

Answer 1

Architecture is subjective, but here is how I would go about it -

3 base models

User = Backbone.Model.extend({
    defaults : {
        name : ""
    }
})
Payment = Backbone.Model.extend({
    defaults : {
        user : new User(),
        users : new UserList(),
        event : ""
    }
})
Comment = Backbone.Model.extend({
    defaults : {
        user : new User(),
        event : ""
    }
})

3 Collections

UserList = Backbone.Collection.extend({
    model : User
})
PaymentList = Backbone.Collection.extend({
    model : Payment
})
CommentList = Backbone.Collection.extend({
    model : Comment
})

One Event model

Event = Backbone.Model.extend({
    defaults : {
        user : new User(),
        participants : new UserList(),
        payments : new PaymentList(),
        comments : new CommentList()
    }
})

If you initialize your event object with the JSON in the above example, it should just work. In the future if you want to separate out your users to a different API, this code should support that too. If you do want to make the component objects available globally later on, you can just get it from the user object, i.e., window.User = myEvent.get("user")

Hope this helps :)

Answer 2

I wouldn't. I would keep the rails side as simple as possible with object specific calls. Yes it does mean you'll be making more calls to get the full picture but ultimately it will be easier to maintain and changes to one object won't require cascade changes in a bunch of others. For example, what if on top of name you need to add other user attributes?

In other words, Event is just that, an event object. It refers to other objects by id. Each one of those objects have their own model classes and corresponding API urls. So you would then need to get the user object from the API if and when its needed (by id).