5

我是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. 如何将类中的str字符串转换为.Carttemplateunderscore.js

任何帮助将不胜感激，谢谢。

4

1 回答 1

11

我猜你的问题是你#cart_template在 DOM 中存储的位置：

<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作为模板而不是字符串提供。

解决办法是把你的#cart_template外移#cartlist。

我还建议您不要将 传递el给视图的构造函数，您的视图应该创建自己的视图el，调用者应该将el它放在 DOM 中它想要的位置。这样，视图对其元素完全负责，您将遇到更少的僵尸和事件问题。

于 2013-09-25T02:01:02.157 回答