These are chat archives for ractivejs/ractive

26th
Jun 2018
Shakeel Osmani
@shakeelosmani
Jun 26 2018 17:59
I need a little help on lifecycle event. I am using Ractive 0.10.3, and want to call a function once the template is completely rendered. What life cycle event I can hook on to?
kouts
@kouts
Jun 26 2018 18:00
that would be oncomplete
Shakeel Osmani
@shakeelosmani
Jun 26 2018 18:05
Thanks @kouts What happens when the data model changes via an ajax call and the rendering happens because of the update data model
kouts
@kouts
Jun 26 2018 18:14
then the DOM should update accordingly
Shakeel Osmani
@shakeelosmani
Jun 26 2018 18:21
@kouts I have a function that takes class names and hides everything having that class name, when the ajax data comes back I update the data model and then I think rendering of the page takes time and the function gets executed before that. Then nothing gets rendered to the screen(this confuses me why a display none on some of the elements in the template cause nothing to render), if i add a long time out to the function then things work, but it is not ideal.
kouts
@kouts
Jun 26 2018 18:22
can you post a code example in jsfiddle or something?
you can use the playground too https://ractive.js.org/playground
kouts
@kouts
Jun 26 2018 18:32
What I do when I want to hide something is to have a boolean variable that controls whether something is hidden or not.
lets assume this variable is called show
so then I have something like this <div class="{{show ? '' : 'hidden'}}">Content here...</div>
Shakeel Osmani
@shakeelosmani
Jun 26 2018 18:35
Well yes that would be the ideal way, this project got ported to Ractive later on, so it is kind of a sad mix and match of tech at the moment
kouts
@kouts
Jun 26 2018 18:35
Ractive also has a class- directive
that serves the same purpose
Chris Reeves
@evs-chris
Jun 26 2018 18:43
just to note: all rendering in ractive is synchronous, so you don't have to worry about async events happening in the wrong order while you're doing a instance.set('some.data', { ... })-type thing
the promises and related events (complete, destruct) only deal with transitions
the dom is modified as soon as the call returns
Shakeel Osmani
@shakeelosmani
Jun 26 2018 18:45
@evs-chris then how does the template renders updated dom elements when ajax calls modify the data via instance.set('some.data', { ... })
Chris Reeves
@evs-chris
Jun 26 2018 18:46
it happens atomically in the ajax callback
as soon as the set call returns, you can see all of the dom changes in the inspect elements tab of devtools
if you use the render event, you should have full access to the dom immediately after it is rendered
complete fires after any associated intros are also done moving/fading/whatever around
Shakeel Osmani
@shakeelosmani
Jun 26 2018 18:50
So if the function is called on the ajax call back to hide some elements in the dom after the instance.set('some.data', { ... }), however, the entire rendering is not done at all. If I put a setTimeout on the function to the extent that the dom content is completely rendered to the screen then the function works as intended and the content is already rendered
Chris Reeves
@evs-chris
Jun 26 2018 18:51
do you have an example? it sounds like there's something else going on
Shakeel Osmani
@shakeelosmani
Jun 26 2018 19:00
Well It was something else, you were right. Thank a lot @evs-chris and @kouts for all the help!
Chris Reeves
@evs-chris
Jun 26 2018 19:00
glad we could help!