未捕獲的TypeError：無法調用undefined underscore.js的方法'replace'

Question

我是backbone.js和underscore.js新手。

HTML：

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

</script>
</div>

我在哪里調用了視圖文件：

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

JS函數（它適用於javascript項目）：

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

這是視圖：

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. 當我試圖調用視圖模板時，我收到錯誤Uncaught TypeError: Cannot call method 'replace' of undefined - underscore.js 。 請幫我找錯。

2. 如何將Cart類中的str字符串轉換為underscore.js template 。

非常感謝任何幫助，謝謝。

Answer 1

我猜你的問題是你在DOM中存儲#cart_template的地方：

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

您可以像這樣創建CartList ：

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

當你這樣說：

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

#cartlist所有內容都消失了，特別是#cart_template消失了。 然后在CartList ，你嘗試這樣做：

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

但是那時候沒有#cart_template所以$('#cart_template').html()是undefined ，這就是你的錯誤來自： _.template將在內部調用replace但是你將它undefined為undefined的模板而不是一串。

該解決方案是將您的#cart_template外#cartlist 。

我也建議您不要通過el到視圖的構造函數，您認為應該建立自己的el ，主叫方應把該el它希望在DOM。 這樣，視圖對其元素負全部責任，並且您將擁有更少的僵屍和事件問題。