用 backbone 做购物车时遇到的问题?


我购物车model 这样设计的:


 var Product = Backbone.Model.extend({
        defaults: function() {
            return {
                orders:{
                    // 订单id
                    id: "",
                    // 商品标题
                    title: "",
                    // 商品id
                    proId:"",
                    // 商品图片
                    proImg:"",
                    // 商品单价
                    unitPrice:0,
                    // 商品数量
                    proNo:1,
                    //小计
                    subtotal:0,
                    // 服务
                    service:null
                },
                // 总价
                total:""
            }
        },
        urlRoot : 'http://192.168.0.205/app/add.php'
    });

这是view:


 // Product Item View
    var ProductView = Backbone.View.extend({
        tagName:  "li",
        template: _.template($('#item-template').html()),
        events:{
          "click .add   "   : "addNo",
          "click .minus   " : "minusNo" 
        },
        initialize: function() {
          this.listenTo(this.model, 'change', this.render);
          this.listenTo(this.model, 'destroy', this.remove);
        },
        render: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
        },
        // 添加数量
        addNo:function(){        
            this.model.set(
                {
                    proNo:this.model.get("proNo")+1,
                    subtotal:this.model.get("unitPrice")*(this.model.get("proNo")+1)
                },
                {
                    validate: true
                }
            );
            this.model.save();  
        },  
        // 减少数量
        minusNo:function() {
            this.model.set(
                { 
                    proNo:this.model.get("proNo")-1,
                    subtotal:this.model.get("unitPrice")*(this.model.get("proNo")-1)
                },
                {
                    validate: true
                }
            );  
            this.model.save();
        }
    });

这是集合:


 // Product Collection
    var ProductList = Backbone.Collection.extend({
        model:Product,
        url:'http://192.168.0.205/app/getdata.php'      
    });
    var Products = new ProductList;

现通过fetch 拿到的后端数据格式是这样的:


 {
    "data": [
        {
            "id": 1,
            "title": "苹果(Apple)iPhone 6 (A1586) 16GB 金色 移动联通电信4G手机",
            "proId": 668,
            "proImg": "http://img14.360buyimg.com/n1/jfs/t277198/542d0798N19d42ce3.jpg",
            "unitPrice": 4788,
            "proNo": 5,
            "subtotal": 23940,
            "service": ""
        },
        {
            "id": 2,
            "title": "三星 Galaxy S6(G9200)32G版 铂光金 移动联通电信4G手机 双卡双待",
            "proId": 703,
            "proImg": "http://img13.360buyimg.com/n1/jfs/t874/107fcaNd211fa19.jpg",
            "unitPrice": 5288,
            "proNo": 3,
            "subtotal": 15864,
            "service": ""
        }
    ],
    "total": 39804
}

这是app 显示:


 // The Application
    var AppView = Backbone.View.extend({
        el: $(".cartTable"),        
        initialize: function() {        
            this.listenTo(Products, 'add', this.addOne);
            this.listenTo(Products, 'reset', this.addAll);
            this.listenTo(Products, 'all', this.render);
            Products.fetch({reset: true})       
        },
        addOne: function(todo) {
            var view = new ProductView({model: todo});
            this.$(".goods-items").append(view.render().el);
        },
        addAll: function() {
            Products.each(this.addOne,this);
        }
    });
    var App = new AppView;

这是模板:


 <% if(orders){ %>
        <% for(var j=0;j < orders.length;j++){ %>
            <div class="pro-item clear">
                <div class="fl goods-info-wrap">    
                    <div class="checkbox-wrap">
                        <input class="toggle" type="checkbox" <%= orders[j].done ? 'checked="checked"' : '' %> />
                    </div>
                    <div class="pro-img">   
                        <img class="item-img" src="<%- orders[j].proImg %>" width="80" height="80">
                    </div>
                    <div class="pro-name">                                
                        <a href="product-info.html?id=<%- orders[j].proId %>"><%- orders[j].title %></a>
                    </div>
                </div>
                <div class="fl price-wrap">
                    <span><%- orders[j].unitPrice %></span>
                </div>
                <div class="fl quantity-wrap">
                    <div class="amount">                                
                        <a href="javascript:void(0);" class="minus" data-id="pro-0">-</a>
                        <input class="input-count" type="text" readonly="readonly" value="<%- orders[j].proNo %>" maxlength="2">
                        <a href="javascript:void(0);" class="add" data-id="pro-0">+</a>
                    </div>
                </div>
                <div class="fl sum-wrap">
                   <span class="price"><i>¥</i><em name="priceEm"><%- orders[j].subtotal %></em></span>
                </div>
                <div class="fr ops-wrap">
                    <a href="javascript:"  class="cart-del-pro destroy">删除</a>
                </div>

                </div>  
            </div>
        <% }; %>
    <% } %>
    <div class="gAmount">
        总计收款:<span id="allPrice"><%= total %></span> 元                  
    </div>

这是显结果:
图片描述

当我点击添加的时候 model 设置没有成功,

问题1 这种模型嵌套属性 怎么设值,怎么获取,怎么监听当前呢??

backbone 前端 model JavaScript

zzjin 9 years, 9 months ago

Your Answer