These are chat archives for ractivejs/ractive

27th
Feb 2018
Bruce Tu
@brtu
Feb 27 2018 18:40
hey, new to js and ractive, wondering if anyone can point me in the right direction. right now i have a table where one column is a checkbox for every row to select that row. the table has an array of data, where page 1 has elements 1-10, page 2 has elements 11-20, etc. when i switch pages, the checkbox state stays the same between the different pages of my table. is there a way to "refresh/re-render" the checkboxes when i switch pages?
Screen Shot 2018-02-27 at 1.36.04 PM.png
Screen Shot 2018-02-27 at 1.36.18 PM.png
small example of what is happening... i switch pages on my table and the data changes, but my checkboxes keep the same state
Joseph
@fskreuz
Feb 27 2018 18:46
If you keep your "selected" flag per item, then you'll need to loop through that data and clear that in that function you're using to switch.
If you're using a separate array to keep your selected state, you need to empty that array.
btw, Ractive has a code playground which you can write shareable demos https://ractive.js.org/playground
Bruce Tu
@brtu
Feb 27 2018 18:53
i see, i think i understand now. thank you!!
Chris Reeves
@evs-chris
Feb 27 2018 20:17
if your data set is not super huge (< 10000?), you can also keep selections in their own array e.g. <input type="checkbox" checked="~selections.indexOf(.)" on-click="@.select(.)" /> where the select method checks to see if the item is in the array and adds or removes it as appropriate
then selectAll is simply a matter of r.set('selections', r.get('items').slice())
Bruce Tu
@brtu
Feb 27 2018 20:20
hm... i tried something similar to that originally, but i was getting strange behavior with the checked attribute. setting checked="true" and checked="false" both resulted in the checkbox being checked
i am also using ractive 0.7.3.... maybe i should update, did the behavior for checkbox change in later versions?
Chris Reeves
@evs-chris
Feb 27 2018 20:21
yep, because checked is a boolean attribute, whose presence causes the box to be checked regardless of value
checkbox behavior hasn't changed but a bunch of other stuff has become possible
I think you can still do this with 0.7.3
Bruce Tu
@brtu
Feb 27 2018 20:22
so <input type="checkbox" checked="~selections.indexOf(.)" on-click="@.select(.)" /> is possible or not possible? slightly confused
Chris Reeves
@evs-chris
Feb 27 2018 20:23
also, I missed the mustaches in my example... should be checked="{{~selections.indexOf(.)}}" and for 0.7.3, you'd call the select method on the instance as on-click="select(.)"
Bruce Tu
@brtu
Feb 27 2018 20:24
but if checked is a boolean prop, won't putting 'checked="{{~selections.indexOf(.)}}"' always result in the checkbox being checked even if it is not present in the selections array?
Chris Reeves
@evs-chris
Feb 27 2018 20:29
nah, ractive has smart attribute handling for those that it knows are boolean
here's a small example using 0.7
pagination makes things slightly more complicated
so, to clarify based on your example, only template controlled by ractive has special handling for boolean attributes
Bruce Tu
@brtu
Feb 27 2018 20:35
i see... i think that is where i went wrong. going to read up more on how that works
Chris Reeves
@evs-chris
Feb 27 2018 20:37
the tutorials take about 1-2 hours to go through, and while not super awesome, they are a reasonably good introduction to all things ractive
interactive code examples don't hurt
Bruce Tu
@brtu
Feb 27 2018 20:38
thanks, will go through it