Question

I’m just getting started with Backbone and ran through a tutorial. I followed along and entered the code and when I got to the end (testing throughout I get underscore cannot call 'replace' of null

Like I said – just getting started, so any information about not only how-to-fix, but why it broke would be awesome!

HTML

<!-- ## CART CONTAINER ## -->
<div id="yourcart"></div>

<!-- ## SCRIPTS ## -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script src="js/cart.js"></script>

<!-- ## TEMPLATE ## -->
<script id="itemTemplate" type="text/template">
    <img src="<%= photo %>" alt="<%= title %>">
    <div>
        <h2><%= title %></h2>
        <h4>&pound;<%= price %></h4>
    </div>
</script>

JAVASCRIPT

//  MODEL

var Item = Backbone.Model.extend({

  defaults: {

    price: 35,
    photo: "http://www.placedog.com/100/100"

  }

});

//  COLLECTION

var Cart = Backbone.Collection.extend({

  model: Item

});

var items = [

  { title: "Macbook Air", price: 799 },
  { title: "Macbook Pro", price: 999 },
  { title: "The New iPad", price: 399 },
  { title: "Magic Mouse", price: 50 },
  { title: "Cinema Display", price: 799 }

];

var cartCollection = new Cart(items);

// ITEM VIEW

var ItemView = Backbone.View.extend({

  tagName: "div",
  className: "item-wrap",
  template: $('#itemTemplate').html(),

  render: function() {
    var templ = _.template(this.template);
    this.$el.html(templ(this.model.toJSON()));
    return this;
  }

});

// COLLECTION VIEW

var CartCollectionView = Backbone.View.extend({

  el: $('#yourcart'),
  initialize: function() {
    this.collection = cartCollection;
    this.render();
  },
  render: function() {
    this.collection.each(function(item) {
        this.renderItem(item);
    }, this);
  },
  renderItem: function(item) {
    var itemView = new ItemView({ model: item });
    this.$el.append(itemView.render().el);
  }

});

$(function() {  
  var cart = new CartCollectionView();
});

Answer 1

Didn’t see any info about the position of the HTML/Scripts, but once I moved the template code above the rest of the scripts it worked perfectly.