用 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 这种模型嵌套属性 怎么设值,怎么获取,怎么监听当前呢??
zzjin
9 years, 9 months ago