These are chat archives for canjs/canjs

13th
Jul 2018
Justin Meyer
@justinbmeyer
Jul 13 2018 02:31 UTC
Tweeted it
nmingneau
@nmingneau
Jul 13 2018 06:50 UTC

@justinbmeyer Sorry for being unclear. I mean css transitions, because it seems the element is always completely rerendered in a #each so it loses state.
I just read this in the Vue docs.

Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.

Maybe a feature like this is possible in Can.js.

Dovid Bleier
@dbleier
Jul 13 2018 07:30 UTC
@justinbmeyer thanks
qantourisc
@qantourisc
Jul 13 2018 14:22 UTC
I have a component, it has a subcomponent <my-comp/>, I wish to follow events on that subcomponent. How would I register to the events ?
Can't do it in viewModel, as then stuff is still being setup
""In previous versions of CanJS, components had the ability to bind to special inserted and removed events that were called when a component’s element had been inserted into or removed from the page:""" That might be my answer
qantourisc
@qantourisc
Jul 13 2018 14:31 UTC
Kevin Phillips
@phillipskevin
Jul 13 2018 14:33 UTC
@qantourisc if you want, you can click "Edit on GitHub" in the top corner of the page and submit a fix for those docs
for your previous question, what kind of events from the subcomponent are you trying to listen to?
Kevin Phillips
@phillipskevin
Jul 13 2018 14:47 UTC
then your parent can listen to them using bindings
<my-comp on:childDispatchedEvent="parentFunction(...)" />
Kevin Phillips
@phillipskevin
Jul 13 2018 14:56 UTC
childDispatchedEvent is just an example
qantourisc
@qantourisc
Jul 13 2018 14:56 UTC
ok
Kevin Phillips
@phillipskevin
Jul 13 2018 14:56 UTC
whatever you pass to obj.dispatch("childDispatchedEvent", ...);
qantourisc
@qantourisc
Jul 13 2018 14:57 UTC
O like that
thanks got it
Kevin Phillips
@phillipskevin
Jul 13 2018 14:57 UTC
sure
why are you dispatching events like that manually?
do you have an example use-case?
in most cases, you would just have a property on your child-comp's viewModel
and you would just change the property
qantourisc
@qantourisc
Jul 13 2018 14:58 UTC
Sure: I have an invoice, that has a number of invoice-lines.
when an invoice-line is added, removed, or changed, I need to recheck the expected invoice-value, and the sum of invoice lines.
But the invoice-lines is a seperate component
(and generic)
There are probably some ways to do this on the frontend though
qantourisc
@qantourisc
Jul 13 2018 15:03 UTC
Hmmm I should probably make the component work with dispatches too, but I fergot how :D
Kevin Phillips
@phillipskevin
Jul 13 2018 15:10 UTC
so your parent's viewModel has a invoice property and does something like
{{# each(invoice.invoiceLines, invoiceLine=value) }}
  <invoice-line-comp invoiceLine:from="invoiceLine"></invoice-line-comp>
{{/ each }}
if you do it like that, you don't need to dispatch anything
if <invoice-line-comp> changes something, the parent component will see those changes automatically
qantourisc
@qantourisc
Jul 13 2018 15:11 UTC
Yea, except, I never have a full list ;)
Well I can't be sure.
Kevin Phillips
@phillipskevin
Jul 13 2018 15:12 UTC
what do you mean?
qantourisc
@qantourisc
Jul 13 2018 15:12 UTC
atm pagination is not handled on the frontend
so the invoiceLines has 10 items, but it might be more
Once I get into the rewrite to make it neat, this kind of thing might happen
qantourisc
@qantourisc
Jul 13 2018 15:18 UTC
I appreciate you trying to find better ways though.
Justin Meyer
@justinbmeyer
Jul 13 2018 16:13 UTC

@nmingneau

it seems the element is always completely rerendered in a #each so it loses state.

That shouldn't happen. CanJS diffs the elements.

Maybe a feature like this is possible in Can.js.

I've proposed this: canjs/canjs#3864 ... but no one votes for it ... If you'd want to pair with me to make that happen, we could pursue it right away!

@qantourisc thanks for the doc link, I'll create an issue