Question

I am trying to implement Backbone with backbone-relational.

The Claim model:

define(['underscore', 'backbone', 'backbone-relational', 'models/User'], function(_, Backbone, relational, User) {
  var Claim = Backbone.RelationalModel.extend({

  relations: [{
      type: Backbone.HasOne,
      key: 'a_user',
      relatedModel: User
  }],

  defaults: {
  },

  initialize: function() {
  },

  clear: function() {
    this.destroy();
    this.view.remove();
  }

  });
  return Claim;
});

The User model is a duplicate but with no relations set.

Below is the collection object:

Object
_byCid: Object
_byId: Object
_callbacks: Object
currentPage: 1
firstPage: 1
information: Object
length: 3
models: Array[3]
0: Object
1: Object
    _callbacks: Object
    _deferProcessing: false
    _escapedAttributes: Object
    _isInitialized: true
    _pending: Object
    _permitsUsed: 0
    _previousAttributes: Object
    _queue: Object
    _relations: Array[1]
    _silent: Object
    attributes: Object
       _deleted: false
       _new: false
       a_user: Object
           _callbacks: Object
           _escapedAttributes: Object
           _isInitialized: true
           _pending: Object
           _permitsUsed: 0
           _previousAttributes: Object
           _queue: Object
           _relations: Array[0]
           _silent: Object
           attributes: Object
               _deleted: false
               _new: false
               already_in_save: false
               already_in_validation: false
               coll_claims: Array[0]
               coll_claims_partial: true
               created_at: "2012-12-12 09:00:00"
               email: "[e-mail]"
               firstname: "Cloud"
               id: 2
               lastname: "Strife"
               modified_at: "2012-12-12 09:00:00"
               modified_columns: Array[0]
               start_copy: false
               title: "Mr"
               validation_failures: Array[0]
               virtual_columns: Array[0]
               __proto__: Object
               changed: Object
               cid: "c4"
               collection: undefined
               id: 2
               __proto__: Object
               already_in_save: false
               already_in_validation: false
      created_at: "2012-12-12 09:00:00"
      fulfilment: "bank"
      id: 2
      manual: 0
      modified_at: "2012-12-12 09:00:00"
      modified_columns: Array[0]
      promotion_id: 1
      purchase_id: 2
      start_copy: false
      status: "pending"
      user_id: 2
      validation_failures: Array[0]
      virtual_columns: Array[0]
      __proto__: Object
      changed: Object
      cid: "c3"
  collection: Object
  id: 2
  __proto__: Object
  2: Object
  length: 3

So essentially there are 3 Claim models in the collection and each Claim model has a nested model of User at the attribute key a_user.

The template looks like:

<% _.each( claims, function( item ){ %>
    <tr>
        <td><%= item.get("id") %></td>
        <td><%= item.get("promotion_id") %></td>
        <td><%= item.get("a_user").get("firstname") %></td>
        <td><%= item.get("purchase_id") %></td>
    <td></td>
        <td><%= item.get("status") %></td>
        <td><%= item.get("created_at") %></td>
    </tr>
<% }); %>

However this results in the error:

TypeError: 'null' is not an object (evaluating 'item.get("a_user").get')

If I take it back to just item.get(“a_user”) it displays outputs [object Object]

I am just learning Backbone so any pointers are appreciated.

Answer 1

You shouldn’t be using get within the template — Underscore templates work with JSON, not Backbone model objects (you pass the model to the template using template(model.toJSON())), so they should be evaluated using basic dot-notation:

<tr>
    <td><%= item.id %></td>
    <td><%= item.promotion_id %></td>
</tr>