Sorry for the title, with some more words everything should be clear. Let’s say I have an array of cards to build a deck from. I choose some cards randomly and display them in a Table. Then I want to select some of them using the checkbox on the left, and rebuild the deck choosing random cards again, but for the non-checked positions. Think the checkbox like a “lock” command. It’s clear to me why I get a circular reference error, but I can’t find how to fix it. I tried mutables with no look.
Here’s my take:
I used a mutable to represent the deck of cards, assigning to the mutable in an event listener that is triggered by clicking a button. The Table show’s the mutable’s value, and thus reacts to the deck being shuffled. Lastly, I used Observable’s “this” to preserve the Table’s selection even when it is redrawn. Using “this” is generally not recommended… but it seems to work well here.
Hope this helps!
1 Like
Thanks! I didn’t knew about onclick=${function} and this as last value, these were the keys to the problem.
I was able to make some progress by making the deck mutable, but had issues in refreshing it using Button's viewof pattern. Then, I was giving up altogether when I realized I couldn’t preserve the Table selection state across shuffles, but the this trick is great.
This is something you get with Hypertext Literal, which Observable Inputs provides so I imported from there. The current html tagged template literal doesn’t support this (though there are workarounds with Object.assign), but eventually our hope is to upgrade the standard library to Hypertext Literal once we implement standard library versioning.
this is sometimes useful if used minimally, as here. Just be careful with it. 
1 Like