Get Uncaught TypeError: Object #<Object> has no method 'get' when i try to display data in template

Question

I am running into the issue of getting Uncaught TypeError: Object # has no method 'get' when i try to display data in a template here are the different backbone parts:

Template:

<script type="text/template" id="class-template">


                <table class="table striped"></table>

                <thead>

                <tr>

                <th>Picture</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Role</th>
                <th>Email</th>


                </tr>

                </thead>

                <tbody>

                <% _.each(users,function(user){ %>

                <tr>
                <td><%= user.get('picUrl') %></td>
                <td><%= user.get('firstName') %></td>
                <td><%= user.get('lastLame') %></td>
                <td><%= user.get('role') %></td>
                <td><%= user.get('email') %></td>




                </tr>

                <% }); %>

                </tbody>
                  </table>

    </script>

Data Models and Collection:

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {

        options.url = 'http://localhost/' +options.url;

        });

        var Office = Backbone.Model.extend({

            defaults: {
                street : null,
                city : null,
                state : null, 
                country : null,
                postal_code : null,
            },
            initialize: function(){
                console.log("==> NEW LOCATION");

                // you can add event handlers here...


            }
        });
         var Person = Backbone.Model.extend({

            defaults: {
                picURL : null,
                firstName : null,
                lastName : null, 
                email : null,
                role : null,
                location : new Office()
            },
            initialize: function(){
                console.log("==> NEW PERSON MODEL");

                // you can add event handlers here...


            }
        });

        var Users = Backbone.Collection.extend({

        url:'loadData.php?list=16025,28477,28474,25513,16489,58911,04607',
        model:Person

        });

View:

var ShowClass = Backbone.View.extend({

            el: '.page',
            initialize: function() {
                _.bindAll(this); //Make all methods in this class have `this` bound to this class
            },

            template: _.template($('#class-template').html()),

            render: function() {

                var users = new Users();

                console.log('calling fetch');

                users.fetch();

                users.on("reset", function(users){
                    console.log('rendering with data:'+users.models[0].get('firstName'));
                    this.$el.html(this.template({users:users.models}));
                    console.log('finished');
                }, this);

            }

            });

I am able to see the data that is returned from the fetch call, so i know that I am getting data back. It all seems to fall apart when i send it to the template. Thanks in advance for all of your help!

Answer 1

Instead of performing the get() on your script template, you should just pass the raw attributes as oppose to passing in the entire model.

I realize that you also have to change your template but abstracting your template this way and doing the loop outside the template itself would give you a better handle on your error. This will also make your code modular and easier to debug.

View:

users.on("reset", function(users){
    _.each(users, function (user) {
        var data = user.toJSON();
        this.$el.html(this.template({
                        picUrl: data.picUrl, 
                        firstName: data.firstName }));
    }, this);

The template would simply be:

<td><%- picUrl %></td>
<td><%- firstName %></td>
...