These are chat archives for ractivejs/ractive

20th
Mar 2018
Chris Reeves
@evs-chris
Mar 20 2018 00:36
it only works with undefined
Chris Reeves
@evs-chris
Mar 20 2018 01:29
also, that's a seven syllable word, so you get 10 internet points
Cerem Cem ASLAN
@ceremcem
Mar 20 2018 04:53
ahahah :D
Chris Reeves
@evs-chris
Mar 20 2018 04:57
it looks like the docs say undefined, though there's probably a good argument to be made for null doesn't exist too
Cerem Cem ASLAN
@ceremcem
Mar 20 2018 08:20
ok. I tried
Dayton
@daytonlowell
Mar 20 2018 16:48
Does Ractive have anything like Svelte's <:Window> tag for dealing with event listeners on window? https://svelte.technology/guide#-window-tags
Paul Maly
@PaulMaly_twitter
Mar 20 2018 16:49
nope
Chris Reeves
@evs-chris
Mar 20 2018 17:04
you could probably swing something with a decorator pretty easily, but no, there's not a direct analog
Joseph
@fskreuz
Mar 20 2018 17:09
You can always hook a handler inside an onrender. It's practically the same, but without the parser routine.
fwiw, this was suggested in Ractive a looong time ago ractivejs/ractive#2003
Chris Reeves
@evs-chris
Mar 20 2018 18:24
I forgot about that issue... I'll add a decorator to handle that to my list, as decorators can now raise events and manage bindings pretty easily using the context object
Bruce Tu
@brtu
Mar 20 2018 18:40
@kouts or anyone else who may be able to help, i have an issue with the way jquery datatables is behaving with ractive 7
i have this playground that works great with ractive 8, adding/deleting rows to the datatable is great
however, when i change the playground to ractive 7, i have issues with deleting rows. the table doesn't seem to update the number of entries or the data in the table when a row is deleted
Paul Maly
@PaulMaly_twitter
Mar 20 2018 18:49
omg)
Bruce Tu
@brtu
Mar 20 2018 18:51
is my only option to try updating to ractive 8 to get it to work, or is there something i'm missing in how ractive7 splice works, or maybe there is another easy fix
Paul Maly
@PaulMaly_twitter
Mar 20 2018 18:57
I think it's some bug in 0.7. seems that 0.8 had many changes
so, you need to find some workaround or has update to 0.8
I think we even hadn't context in 0.7
Bruce Tu
@brtu
Mar 20 2018 19:00
i see.. thank you. i guess i'll try updating my project to .8
adding a row seems to work fine in .7, just deleting one is broken
Paul Maly
@PaulMaly_twitter
Mar 20 2018 19:00
or maybe latest version
Bruce Tu
@brtu
Mar 20 2018 19:01
do you think it's easier to upgrade from .7 -> latest .9 in one shot or go from .7 -> .8 -> .9?
Paul Maly
@PaulMaly_twitter
Mar 20 2018 19:02
I think you could update directly to 0.9
Bruce Tu
@brtu
Mar 20 2018 19:04
cool, thanks much
kouts
@kouts
Mar 20 2018 19:12
@brtu yes that was one of the reasons I upgraded to 0.8 edge back then...
try upgrading to 0.9 it's much more stable now
Btw I have a project with 20+ datatables with the decorator below:
Ractive.decorators.datatable = function(el, keypath, options){
    var table;
    var observerBefore = this.observe(keypath, function(){
        if(table){
            table.destroy();
        }
    });
    var observerAfter = this.observe(keypath, function(){
        table = $(el).DataTable(options);
    },{defer: true});
    return {
        teardown: function(){
            observerBefore.cancel();
            observerAfter.cancel();
            table.destroy();
        }
    };
}
works like a charm!
Bruce Tu
@brtu
Mar 20 2018 19:16
oh nice. i was trying to wrap datatables in a decorator but didn't get the observer part to work correctly
thanks for this!
kouts
@kouts
Mar 20 2018 19:16
you just have to pass the keypath that you are looping
e.g
<table class="display compact " width="100%" as-datatable="'ARRAY_OF_OBJECTS', {scrollY: '185px', scrollCollapse: true}">
let me try to fix an example in the playground
The key to this is that it needs to destroy the table before Ractive makes the changes to the DOM and then reinitialize the table after Ractive has made changes to the DOM.
The only way to make it work without issues is with 2 observers like in the example
If you don't like the fact that every time a change is being made in data the table resets, you can use the stateSave: true option
kouts
@kouts
Mar 20 2018 19:56
In case you have too many data, consider using the DOM only for the table headers and build it with pure JS.
in this case Ractive won't touch the datatables DOM at all.
Bruce Tu
@brtu
Mar 20 2018 20:02
great, thanks for these examples @kouts
kouts
@kouts
Mar 20 2018 20:08
You're welcome!
Datatables is one of the most complete libraries in it's field
it's very very difficult to surpass
this one is very powerful too: https://www.ag-grid.com/
(more powerful)