点击模型并添加到主干中的其他集合中

get clicked model and add to other collection in backbone

本文关键字：其他 集合 模型 添加      更新时间：2023-09-26

我需要点击ItemCollection上的项目并将其转移到CartCollection。但我无法让它发挥作用。我需要得到用户点击的currentTarget的模型。有什么想法吗？我评论了一个CartCollection.add只是为了测试它。

define([
'jquery',
'underscore',
'backbone',
'model/item_model',
'model/cart_model',
'collection/item_collection',
'collection/cart_collection',
'view/cart/cartlist_view',
'text!templates/items/itemlist.html'
],function($, _, Backbone, Item, Cart, ItemCollection, CartCollection, CartListView,          ItemListTemplate){
var ItemListView = Backbone.View.extend({
el: $("#mainContainer"),
events:{
    "click #itemListContainer li" : "AddToCart"
},
initialize: function(){
  this.model = Item;
  this.collection = ItemCollection;
  this.collection.bind("reset", this.render );
  CartCollection.bind("add", CartListView.render());
},
render: function(){
  var data = {
    items: ItemCollection.models,
    item: Item
  }
  var compiledTemplate = _.template( ItemListTemplate , data);
  $("#itemContainer").html( compiledTemplate );
},
AddToCart:function(ev){
    ev.preventDefault();
    // CartCollection.add([
        // {ItemCode:"item-12312",ItemDescription:"OldSomething",RetailPrice:"2",Qty:"1"},
        // {ItemCode:"item-12122",ItemDescription:"OldSometh21g",RetailPrice:"4",Qty:"2"}
    // ]);
    // var code = $(ev.currentTarget).data("ItemCode");
    // var test = CartCollection.get(code);
    // var name = test.get("ItemDescription");
    CartListView.render();
    alert($(ev.currentTarget).text());
}
});
return new ItemListView;
});

Alt A：为持有模型的每个子项创建一个视图

当呈现图表项时，您可以将其添加到子视图中，在子视图中传递模型和回调。当每个子视图被点击时，回调都会被调用：

ItemView({
    model: item, 
    onAdd: this.AddToCart
});

在子视图中：

events: {
    "click": "onClick"    
},
onClick: function(){
    this.options.onAdd(this.model);
}

在父视图中：

AddToCart: function(model){
    //Do what you what you want with the item
}

Alt B:将模型id添加到li项目并从项目集合中获取

<li><a href="#" data-id="<%=item.id%>">An item</a></li>

然后从项目集合中获取模型：

var id = $(e.currentTarget).data("id");
var item = items.get(id);
相关文章：