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()) });

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.
How can I convert str string in Cart class to a template of underscore.js.

Any help would be much appreciated, thank you.

Hi.Did you find a solution for this? I am stuck in the similar situation. — user3437315
– user3437315, Commented Jul 12, 2015 at 16:28

mu is too short · Accepted Answer · 2013-09-25 02:01:02Z

11

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.

answered Sep 25, 2013 at 2:01

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

titi Over a year ago

I tried to change <div id="cartlist"></div><script type="text/template" id="cart_template"/> but there nothing display in UI. And could you give me an example of your view should create its own el and the caller should put that el where it wants it in the DOM please. Thanks.

mu is too short Over a year ago

But your template is empty so why would anything display? The Backbone documentation and the standard TODOs example should show you how to set up a view that creates its own el.

titi Over a year ago

It is working while I did this render: function(){ this.$el.html(myCart.showCart()); } and var cart_view = new CartList({ el: $("#cartlist") });.

ismnoiet Over a year ago

Put your backbone code inside the $(document).ready() method to insure that the DOM is ready so $('#cart_template') is accessible then the backbone code will be executed

mu is too short Over a year ago

@hamism: Not in this case. The problem here is that the template is inside the DOM node that is the view's el, then the content of el is replaced and that destroys the DOM node that contains the template.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related