【发布时间】：2025-11-30 04:40:01
【问题描述】：
问题底部有一个javascript 和coffescript jsfiddle。
两个小提琴都包含需要按特定顺序读取的解释性 cmets，当您单击 product 或 @ 时，它将值打印到 console 987654329@，另外我给你这个我的问题的基本解释。
- 我有 3 个 Javascript 类
Purchase、Product和Item -
一个
Purchase有很多Products，一个Product有很多Items -
Purchase对象在$('submit')上设置了一个click event handler，onClick()会将items数据发布到我的后端api -
这是从my backend api 接受的
data格式{ 'purchase' => { 'items_attributes' => { '0' => { 'purchase_id' => '1' }, '1' => { 'purchase_id' => '2' } } } }
My coffeescript jsfiddle is at the following link
点击下方打开javascript fiddle。
(function() {
var Item, Product, Purchase,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Purchase = (function() {
function Purchase() {
/* on $(document).ready a new Purchase is created */
this.submit = $('#submit');
/* for each div.product a new Product instance is created */
this.products = $.map($('.product'), function(product, i) {
return new Product(product);
});
/ @onSubmit() */
/* Comment 3)
My issue here is how to I access the this.items from the Purchase class and call serialize()?
onSubmit: function () {
@submit.click(function(){console.log(Product.serialize())};
} */
}
return Purchase;
})();
Product = (function() {
Product.items = [];
function Product(product) {
this.product = $(product);
this.id = this.product.data("id");
this.submit = $('#submit');
this.setEvent();
this.onSubmit();
}
Product.prototype.setEvent = function() {
return this.product.click((function(_this) {
return function() {
/* Comment 1)
Product.items is a class variable of Product, because I need to access it from the Purchase class and send post request. When the user clicks on the $('submit') button*/
Product.items.push(new Item(_this.id));
return console.log(Product.items);
};
})(this));
};
Product.prototype.onSubmit = function() {
return this.submit.click(function() {
/* Comment 2)
This works as you can see, but we have 4 products and this operation will
be performed 4 times. I want to achieve this in the Purchase object so it is perfomed only once, by creating a sumit event handler in Purchase */
return console.log(Product.serialize());
});
};
Product.serialize = function() {
var item;
return {
items_attributes: (function() {
var j, len, ref, results;
ref = Product.items;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
item = ref[j];
results.push(item.serialize());
}
return results;
})()
};
};
return Product;
})();
Item = (function() {
function Item(product_id) {
this.product_id = product_id;
this.serialize = bind(this.serialize, this);
}
Item.prototype.serialize = function() {
return {
product_id: this.product_id.toString()
};
};
return Item;
})();
$(document).ready(function() {
return new Purchase();
});
}).call(this);.console {
background-color: grey;
color: white;
height: 500px;
} # I print to the console Product.items
h4 {
color: red;
width: 100%;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="product" data-id="1">Product 1</li>
<li class="product" data-id="2">Product 2</li>
<li class="product" data-id="3">Product 2</li>
<li class="product" data-id="4">Product 3</li>
<li class="product" data-id="5">Product 4</li>
<div id="submit">Create Purchase</div>
</ul>
<h4>check logs by opening the console</h4>在我编写开源代码时，您可以查看我的 commit history、specific commit 并 fork 项目
【问题讨论】：
-
您确定要使用字符串键
"0"和"1"的对象而不是数组吗？您的代码中的@products.click处理程序在哪里？你是说@submit.click吗？ -
@Caffeinated.tech 非常感谢！我正在考虑在
Purchase类中执行类似@products.click => new Item的操作，然后将这些实例保存在class Purchase; @items = ...中，这样当我执行@submit.click时，我可以通过传递所有@items来执行AJAX。rails params要求的格式是items_attributes => {"0"..等等。但是你认为我可以使用数组吗？因为它需要被字符串化，以及如何使用该格式？非常感谢
标签： javascript ajax coffeescript javascript-objects