Observable.add(arg.data), why it updates all the value ?

Bug Reports
1

Hello,

I am doing a cart for the sake of my Online shop project.

Here is my issue; I didn’t find any relevant solution :

// dataStore.js
var myCart = Observable()
exports.myCart = myCart

// product.js
function addtocart(arg) {
	dataStore.myCart.add(arg.data.product);
}

When I add “product 1” its working fine , on the view I have

-- product 1 --

Now let’s say I want to add product 2, it’s also working but on the view now I have :

-- product 2--
-- product 2--

// instead of 

`-- product 1--
-- product 2--

I understand that I am giving a reference and that mess everything up, but how do I solve that ?
what I have tried:

dataStore.myCart.add(object.assign({}, arg.data.product))

and also have tried

dataStore.myCart.add(new product(arg.data.product.name, arg.data.product.price));

It may help so I also add the code of my view :

// cart.ux, works except that all the items will be the same
<Each Items="{myCart}">
			<DockPanel Padding="10">
				<Panel Layer="Background" Clicked="{productDetails}" Color="#EEE" HitTestMode="LocalBounds"/>
				<Label Value="{name}"  />
				<Label Value="{price}€" Alignment="Right"/>
			</DockPanel>
		</Each>

Sorry fo any inconvenience my previous post, I could not delete it.
Thanks for your help.

2

Hi!

Not sure what’s wrong from the code you have posted. Are you able to post a complete test case?

3

Thanks for answer. I ll try to put more code.

First my store.js file, an extract showing how I pass the product data to the “dockpanel UX template” product.

// args come from the 
  function goProductDetails(args) {
    router.push("product", args.data)
  }

then this part is an extract from my ProductDetails page and “addToBucket” the function that add the product to the cart. Cart define in my post above is an empty observable.

var product = productView.Parameter.flatMap( function(param) {
	return (param);
});


function addToBucket(arg) {
	dataStore.paniers.add(arg.data.product);
}

Then in my cart.js/cart view, I wanna display the product list

// I only export the "paniers" observable wich is my cart
module.exports = {
	paniers: dataStore.paniers
}

<Each Items="{myCart}">
            <DockPanel Padding="10">
                <Panel Layer="Background" Clicked="{productDetails}" Color="#EEE" HitTestMode="LocalBounds"/>
                <Label Value="{name}"  />
                <Label Value="{price}€" Alignment="Right"/>
            </DockPanel>
        </Each>

I don’t know if its relevant but I have upload a short video showing my bug in action:
https://expirebox.com/download/99ede8eaa1c00f2b22a14f41e064520d.html

EDIT:
Here you can find the whole project : https://github.com/KGabson/Online-shop-project