Binding problem

1

Hello,

I have a button on which i dynamically display the number of items in the cart. Also, on the cart page I can manually (in the input type=“number”) enter the count (number) of same product which I want to buy.

Problem is when I have a few different products in the cart and I try to edit the number of one product manually, on the cart button I get the string of numbers of every product in the cart. So, the value is not calculated immediately but after the the page is refreshed.

E.g. From the index pageI have added three different products (2xA, 3xB, 1xC) in the cart. On the cart button I see now 6. But, when I enter the cart page and change the number of one product, lets say I want 4 pieces of product A, I get on the cart button 431 instead of calculated value 8. After I refresh the page, the value is calculated properly.

Template:

{{input type="number" value=cart-item.count focus-out="acceptChanges"}}

Controller:

totalCounts: function() {

	var items = this.get('model');

	var counts = 0;
	items.forEach(function(item){
		counts += item.get('count');
	});

	return counts;

}.property('model.@each.count')

cart-item model:

 export default DS.Model.extend({
  product: DS.belongsTo('product', {async: true}),
  count: DS.attr('number'),
  price: function() {
  	return this.get('count') * this.get('product.price');
  }.property('count', 'product.price')
2

Your description looks like a string concatenation rather than number. Maybe your html input is returning a string try wrapping the item.get in a Number () function hopefully that will force any accidental string to increment the value.

3

Actually, that helped. Thanks a lot. :smile: BR