Backbone.js Uncaught ReferenceError: x is not defined

Question

I am getting Uncaught ReferenceError: _auditNumber is not defined error while trying to bind my model to the view using backbone.js and underscore.js

<script id="searchTemplate" type="text/template">

                        <div class="span4">
                            <p>"<%= _auditNumber %>"</p>
                        </div>
                            <div class="span4">
                            <p>"<%= _aic %>"</p>                            
                </script>

Collection

//Collection
var AuditsCollection = Backbone.Collection.extend({

    initialize: function() {

        this.on('add', this.render);
    },

    render: function() {

        _.each(this.models, function (item) {

            var _auditView = new AuditView({
                model: item
            });

            $("#audits").append(_auditView.render().el);
        });
    },
});

Model

var Audit = Backbone.Model.extend({

        url: function () {

            return myUrl;
        },
        defaults: {

            _auditNumber: "",
            _aic: "",           
        },
        parse: function (data) {

            data.forEach(function (auditItem) {
                var auditsCollection = new AuditsCollection();
                auditsCollection.add(JSON.stringify(auditItem));
            });
        }
    });

// Sub View
var AuditView = Backbone.View.extend({

    className: 'row-fluid',
    template: $("#searchTemplate").html(),

    render: function () {

        var tmpl = _.template(this.template);

        this.$el.html(tmpl(this.model.toJSON()));

        return this;
    }
});

I know I am missing something simple, any help is appreciated.

Answer 1

2 problems (at least - you're kind of off in the weeds given how many backbone tutorials there are).

1. Your model URL is returning a list of results. That's what collections are for. Your model should fetch a single record and the parse method has to return the model's attribute data. If you stick with the tutorials, you won't need a custom url function and you won't need a custom parse function at all.

   var Audit = Backbone.Model.extend({
       url: function () {
           //This needs to be a url like /audits/42 for a single record
           return myUrl;
       },
       defaults: {
           _auditNumber: "",
           _aic: "",           
       },
       parse: function (data) {
           //this needs to return an object
           return data[0];
       }
   });
   

2. You aren't passing a valid data object to your template function.

   // Sub View
   var AuditView = Backbone.View.extend({
       className: 'row-fluid',
       //compile template string into function once
       template: _.template($("#searchTemplate").html()),
       render: function () {
           //render template into unique HTML each time
           this.$el.html(this.template(this.model.toJSON()));       
           return this;
       }
   });