Uncaught TypeError: Cannot call method 'replace' of undefined underscore.js

Question

I'm newbie to backbone.js and underscore.js.

HTML :

<div id="cartlist">
<script type="text/template" id="cart_template">

</script>
</div>

Where I called the view file :

<script type="text/javascript" src="webcore/views/CartView.js"></script>
</body>

JS function(it works well with the javascript project):

 function Cart(){
    ......
    this.showCart = function (){
    var item = deserializeJSONToObj(window.localStorage.getItem(Cart.storageName));
    var str = '<table id="showcart">';
    str += '<tr><td class="cartitemhead">Item to buy</td><td class="cartitemhead" style="text-align: center;">Quantity</td></tr>';
    $.each(item, function(i, item) {
        str += '<tr><td><table class="verticallist"><tr><td rowspan="4" style="width: 120px;"><img src="' + item.PictureName + '" alt="Product" width="95px"/></td><td style="font-weight: bold;">'+trimString(item.Name,50)+'</td></tr><tr><td><i>Available in Stock(s)!</i></td></tr><tr><td><i>Rating:   650Va-390w Input:   Single</i></td></tr></table></td><td class="centertxt">'+item.QuantityInCart+'</td></tr>';
    });
    str += '</table>';
    return str;
 } 

This is the Views :

var myCart = new Cart();
CartList = Backbone.View.extend({
initialize:function(){
    this.render();
},
render: function(){
    var template = _.template( $("#cart_template").html(), {} );
    this.$el.html( template );
}
});
var cart_view = new CartList({ el: $("#cartlist").html(myCart.showCart()) });

1. when I trying to call the view template, I am getting error Uncaught TypeError: Cannot call method 'replace' of undefined - underscore.js. Please help me to find the mistake.

2. How can I convert str string in Cart class to a template of underscore.js.

Any help would be much appreciated, thank you.

Answer 1

I'd guess that your problem is where you're storing #cart_template in the DOM:

<div id="cartlist">
    <script type="text/template" id="cart_template">
    </script>
</div>

You create your CartList like this:

var cart_view = new CartList({ el: $("#cartlist").html(myCart.showCart()) });

When you say this:

$("#cartlist").html(myCart.showCart())

everything that was inside #cartlist is gone, in particular, #cart_template is gone. Then inside CartList, you try to do this:

_.template( $("#cart_template").html(), {} );

But there is no more #cart_template at that point so $('#cart_template').html() is undefined and that's where your error comes from: _.template will call replace internally but you're giving it undefined as the template instead of a string.

The solution is to move your #cart_template outside #cartlist.

I'd also recommend that you not pass the el to the view's constructor, your view should create its own el and the caller should put that el where it wants it in the DOM. That way the view is wholly responsible for its element and you'll have fewer zombie and event problems.