点击获取模型和添加到其他集合中的骨干 [英] get clicked model and add to other collection in backbone

问题描述

我需要点击ItemCollection项目，并将其转移到CartCollection。但我无法得到它的工作。我需要得到用户点击currentTarget的模式。有任何想法吗？我评论了CartCollection.add只是为了测试它。

 定义（[
jQuery的，
下划线，
'骨干'，
模式/ item_model'，
模式/ cart_model'，
收集/ item_collection'，
收集/ cart_collection'，
视图/车/ cartlist_view'，
的文字！模板/项目/ itemlist.html
]函数（$，_，骨干，项目，购物车，ItemCollection，CartCollection，CartListView，ItemListTemplate）{VAR ItemListView = Backbone.View.extend（{
EL：$（＃mainContainer上），
事件：{
    点击#itemListContainer李：AddToCart
}，
初始化：功能（）{
  this.model =项目;
  this.collection = ItemCollection;
  this.collection.bind（复位，this.render）;
  CartCollection.bind（增加，CartListView.render（））;
}，
渲染：功能（）{
  VAR数据= {
    项目：ItemCollection.models，
    项目：项目
  }
  变种compiledTemplate = _.template（ItemListTemplate，数据）;
  $（＃itemContainer）HTML（compiledTemplate）。
}，
AddToCart：功能（EV）{
    。EV preventDefault（）;
    // CartCollection.add（[
        // {项目code：项-12312，ItemDescription：OldSomething，RetailPrice：2，数量：1}，
        // {项目code：项-12122，ItemDescription：OldSometh21g，RetailPrice：4，数量：2}
    //]）;
    //变种code = $（ev.currentTarget）。数据（项目code）;
    // VAR测试= CartCollection.get（code）;
    //变量名称= test.get（ItemDescription）;
    CartListView.render（）;
    警报（$（ev.currentTarget）的.text（））;
}
}）;
返回新ItemListView;
}）;
 

解决方案

Alt键答：每个子项拿着模型创建一个视图

在渲染图的项目，你可以将它添加到您传递模型和回调子视图。回调是由每个子视图称为被点击时：

  ItemView控件（{
    型号：项目，
    使用onAdd：this.AddToCart
}）;
 

在子视图：

 事件：{
    点击：的onClick
}，的onClick：功能（）{
    this.options.onAdd（this.model）;
}
 

在父视图：

  AddToCart：函数（模型）{
    //你想要什么什么与项目
}
 

Alt键B键：加入模型身份证到里项目，从项目收集得到它

 ＆LT;李＆GT;＆LT; A HREF =＃数据-ID =＆LT;％= item.id％GT;＆gt;一种项目＆lt; / A＆GT;＆LT; /立GT;
 

，然后得到从项目集合模型：

  VAR ID = $（e.currentTarget）。数据（ID）;
VAR项目= items.get（ID）;
 

I need to click items on ItemCollection and transfer it to CartCollection. But i can't get it to work. I need to get the model of the currentTarget clicked by the user. Any ideas? I commented out a CartCollection.add just to test it.

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: Create a view for each sub item holding the model

When rendering chart items you can add this to a sub view where you pass model and a callback. The callback is called by each subview when it is clicked:

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

In subview:

events: {
    "click": "onClick"    
},

onClick: function(){
    this.options.onAdd(this.model);
}

In parent view:

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

Alt B: Add the model id to the li item and get it from a item collection

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

And then get the model from the items collection:

var id = $(e.currentTarget).data("id");
var item = items.get(id);

这篇关于点击获取模型和添加到其他集合中的骨干的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！