Merging states or flexible objects? about simulacra

[gr0uch]

I think how you could structure your state is like:

{
  products: [
    { id: 1, addingProduct: false },
    { id: 3, addingProduct: false }
  ]
}

This way, you just do products.push(...) to add new items on the page.

It's not supported to dynamically define properties on the binding.

[gr0uch]

A big object that renders everything is exactly how I use it. Here's an example: https://github.com/fortunejs/fortune-http/blob/master/lib/html_serializer.js

I would recommend using it on both server and client if you're going to be re-using existing HTML, the reason for that is it should guarantee that the state and the rendered HTML are consistent.

If I understand correctly, you don't want to fully render all of the HTML on the server-side, and let the browser make AJAX requests to get more info? Why not have the server render it?

I'm working on a large single page app using simulacra.js and I'd love to open source it, but it's just not ready yet.

[adrianmiu]

Thanks for the quick response

1. The server app is written in PHP
2. The AJAX requests happen upon user interaction

Assuming the state object is called appState (which is initially and partially populated by the server) when the user clicks on an "Add to cart" button i want to

1. Set appState.UI.addingProductToCart_{id_of_the_product} = true
2. Have simulacra disable the "add to cart" button and display a spinner because it detected the change at 1)
3. Make an AJAX call and wait for the response
4. On success, have simulacra update a shopping cart widget with the new details of the cart
5. Set appState.UI.addingProductToCart_{id_of_the_product} = false
6. Have simulacra re-enable the "add to cart button"

As you can see, I need to be able to attach different properties to the appState, properties that I don't know. I've seen you are using Object.defineProperty which requires knowing in advance what properties are set on an object.

[gr0uch]

You can define a binding like:

{
  addingProduct: [ 'button.add-product', function (node, value) {
    node.classList[value ? 'add' : 'remove']('loading-spinner')
  } ]
}

Make sure your initial state includes:

{
  addingProduct: false
}

How you handle the AJAX request is up to you, but you could do something like:

appState.addingProduct = true
ajax(...).then(function(result) {
  appState.addingProduct = false
})

By the way, it might not be a good idea to use IDs as the property, because you'd have to define them up front. Better way might be to have a separate property called id, and use arrays of objects.

[adrianmiu]

The thing is there are numerous products on a page and user can click on few 'add to cart' buttons. So my state should have something like

{
  addingProduct_1: false,
  addingProduct_3: false,
}

So the trouble is that I have to know in advance all the properties of the state. In the case of a static page (ie: one where the product list is fixed for the duration of the page) this is possible (although cumbersome) but if I were to implement infinite scrolling I need to be able to add properties on the fly.

Is it possible to do this outside simulacra? Something like this

function set_on_state(simulacraStateObject, property, value) {
   // I don't know what should be here though
  simulacraStateObject.defineProperty(property);
  simulacraStateObject.property = value;
}

[adrianmiu]

Thank you. Why didn't I think of this :)