Fork me on GitHub
#reagent
<
2015-09-28
>
colin.yates10:09:15

hi all - is it safe to create cursors inside a component or should they be created in the outer let in a form-2 component or global name space?

colin.yates10:09:22

it seems (according to docs in the github issues (specifically https://github.com/reagent-project/reagent-cursor/issues/14) that it is fine.

erik_price11:09:35

If you create the cursor in a component, won’t it be recreated every time the component re-renders?

colin.yates11:09:32

that was the motivation for the question, but the comments in that issue lead me to believe that is OK….

erik_price13:09:03

which comments?

colin.yates15:09:41

(sorry @erik_price I didn’t notice your reply)

erik_price15:09:14

I’m not an expert in Reagent, but my reading of this is that any time the grid-a ratom changes, grid-component will re-render, and recreate the subcursors. So the benefit of using subcursors here seems to be limiting cell-component’s knowledge of the entire grid-a data structure to only the substructure. But I don’t think there is any performance win, as there would be if the subcursors were constructed “up front” and then closed over by the rerender function.

erik_price15:09:20

Maybe I’m wrong?

nooga15:09:56

I still don’t get how do I render a checkbox that changes the atom but does not re-render every time its checked ;/

gadfly36115:09:35

@nooga, can you provide a gist or code snippet?

nooga15:09:22

but when I swap the :items part of the state, it re-renders

nooga15:09:01

and the result, as expected, is :tasty toggling, but with re-render after every click on any checkbox

nooga15:09:26

so I think this is not the best way to approach this problem, looks clunky

Tom H.15:09:37

I think by dereffing in [items @state] you are forcing a rerender of items each time state changes

nooga15:09:32

so how would you structure a list of items with checkboxes then?

gadfly36115:09:15

I'm not sure i undersrand what the desired behavior is, without a rerender how can the checkbox get checked?

nooga15:09:09

yes, and the state updated accordingly

ivanbokii15:09:46

@nooga is the problem that all checkboxes get re-rendered instead of only one that has been changed?

nooga15:09:47

yes, but that’s probably because my solution is quite naive

nooga15:09:23

I’m just trying to learn „the proper way" to build such editable list

erik_price15:09:43

“looks clunky” – you mean the checkbox flashes briefly, because the item component results in the <div><span><input… being removed from the DOM, then a new one created and added to the DOM?

erik_price15:09:49

or do you mean something else?

nooga16:09:09

@erik_price: that’s exactly what I mean

erik_price16:09:12

I thought so. But it seemed like there was some confusion on that, so I figured I’d have you clarify. But I don’t know the solution for this.

nooga16:09:21

also toggle-tasty has to go through the whole vector and look up the right element

nooga16:09:55

i thought there’s maybe way to tell reagent that this checkbox is bound to this bool and it would work both ways

gadfly36116:09:38

This isnt a small example unfortunately, but i would take a look at this: https://github.com/tastejs/todomvc/tree/master/examples/reagent

gadfly36116:09:02

Within that there are a lot of components, take a look at todo-item

nooga16:09:34

it looks like it’s doing very similar thing

gadfly36116:09:40

So if you have something like an ID (in reagent atom not a dom id) to the path of your checkbox, you can use 'update-in' and go directly to the path of your checkbox in your reagent atom when swapping. This avoids the need to go through the whole list.

nooga16:09:44

but what if I want to display the items sorted differently?

nooga16:09:18

I get the vals sorted where the for is used?

val_waeselynck16:09:23

@nooga: for the flashing problem, this does not seem Reagent-specific. Maybe you should just not use checkboxes, but some icons instead.

nooga16:09:08

that’s what I just figured out, I’ll give them nice, clickable icons inside the list

nooga16:09:50

and leave checkboxes for reagent-forms

val_waeselynck16:09:31

@nooga: I'm thinking that preventDefault() may also do what you want