These are chat archives for jdubray/sam-examples

23rd
Jun 2016
Kirill Kravchenko
@kirill-kravchenko
Jun 23 2016 18:51
I want to change color (for example) of my view-component and I would like to select this component from DOM, and set style. In my case (as I understand) we dont have state-representation, so there is nothing to pass to view.display function. Where I should store the function that selects component from DOM and sets new style? Is it state-representation function? Can you provide some small example? Thanks. And sorry for my English.
Jean-Jacques Dubray
@jdubray
Jun 23 2016 19:16

I want to change color (for example) of my view-component and I would like to select this component from DOM

You should not do that, the whole point of V = f(M) is that you (almost) never manipulate the DOM, the color should be part of the model and when you generate the stateRepresentation based on the new application state.

you can easily adapt this example to draw the rectangle in a different color
https://github.com/jdubray/sam-samples/blob/master/js-rectangle/rectangle.html
Jean-Jacques Dubray
@jdubray
Jun 23 2016 19:22
Add a color to the draw function:
function draw(x,y, w,h) {
    var x0 = x,
        y0 = y,
        w0 = w,
        h0 = h ;

    return function(ctx,canvas,color) {
      ctx.clearRect(0,0,canvas.width,canvas.height);
      color = color || "#000000";
      ctx.fillStyle(color) ;
      ctx.fillRect(x0,y0,w0,h0);
    }
}
Jean-Jacques Dubray
@jdubray
Jun 23 2016 19:33
I have update the example here
the key to understand is that with V = f(M) and SAM's nap() function, you never need to manipulate the DOM
The whole point of SAM is to avoid DOM manipulations
Kirill Kravchenko
@kirill-kravchenko
Jun 23 2016 20:29
Thanks!
'The whole point of SAM is to avoid DOM manipulations' - and how about performance? I think element.classList.add much faster then root.innerHTML
Jean-Jacques Dubray
@jdubray
Jun 23 2016 20:51
There are many ways you can achieve it, including virtual-dom, I generally don't see any performance issue, even without v-dom.
you have to try it