These are chat archives for ractivejs/ractive

12th
Mar 2018
Cerem Cem ASLAN
@ceremcem
Mar 12 2018 12:33
Did you watch the movie, Jason Bourne? I correlate Ractive with the scene that Jason Bourne sleeps in the park the police asks his passport and JSON starts speaking Danish suddenly and he amazed by the ability of his. Ractive Bourne :D
Bruce Tu
@brtu
Mar 12 2018 15:41
hi all! the ractive site's recommended datatable plugin seems to have a broken demo http://jondum.github.io/ractive-datatable/demo/ and i get an error when i try to import the module into my project. seems like this module isn't being maintained anymore either. i really like this jquery plugin for datatable searchpane with column filtering: https://datatables.net/blog/2017-11-30 . is it possible to wrap this jquery plugin as a ractive component to use in my project and is that the right approach to take?
Cerem Cem ASLAN
@ceremcem
Mar 12 2018 15:46
hi Bruce. there is an ongoing discussion about this problem (you may want to take a look at ractivejs/ractivejs.github.io#136) Of course you can wrap any jquery plugin as a component
Chris Reeves
@evs-chris
Mar 12 2018 15:47
yes, decorators and components are the best way to integrate with third party libs
Bruce Tu
@brtu
Mar 12 2018 15:52
i see, found this bit about using a decorator to integrate a jquery plugin: https://stackoverflow.com/questions/23083841/ractivejs-and-jquery-plugins . i found dagnelie's dataset also and it's nice but i would really like that column filter functionality. thank you both
Cerem Cem ASLAN
@ceremcem
Mar 12 2018 15:59
I've started using some datatables and made some changes according to my needs. In the end, I end up with writing my own. If you have to too, you may consider integrating sifter.js for filter functionality, works like a charm.
you're welcome
kouts
@kouts
Mar 12 2018 16:13
hi @brtu I'm using datatables with Ractive
there are two ways
1) Do the datatable with javascript only and without involving Ractive or
2) Create the datatable rows as an Ractive {{#each... and setup observers to destroy and recreate the datatable when your data (Array) changes
I might have some time later to post an example
Bruce Tu
@brtu
Mar 12 2018 16:22
@kouts i do have a working datatable already with some decent functionality (pagination and column sorting) but thought it may be easier to use pre-built widgets rather than reinvent the wheel and do custom everything
kouts
@kouts
Mar 12 2018 16:23
Ok so you just want to create a component of the datatable then?
Bruce Tu
@brtu
Mar 12 2018 16:25
i may have misinterpreted what you said. do you mean that you are using the jquery datatables plugin with ractive? or that you use your own datatables with ractive?
kouts
@kouts
Mar 12 2018 16:25
yes I use jQuery Datatables
with Ractive
Bruce Tu
@brtu
Mar 12 2018 16:26
ahh, i would love to see an example then!
yes, i misinterpreted you. an example would be very helpful. and which way do you suggest doing, 1 or 2?
kouts
@kouts
Mar 12 2018 16:27
I'll post one but later tonight, I'm not on my PC right now
Bruce Tu
@brtu
Mar 12 2018 16:27
that would be awesome, thank you
Paul Maly
@PaulMaly_twitter
Mar 12 2018 17:42
In my experience, Decorator is the best way integrate 3rd-party dom-related things with Ractive. And also seems it’s little bit cheaper than using Components.
Besides, Decorator is just a function with simple syntax.
kouts
@kouts
Mar 12 2018 19:50
@brtu I have prepared a small jQuery Datatables example here
Bear in mind that in every update the table gets destroyed and created
this might be a problem if you are viewing e.g page 5 and you update the data, you will notice that the table will go back to page 1
this issue though is solvable using local storage API of jQuery Datatables
Let me know if this works for you (link above updated)
kouts
@kouts
Mar 12 2018 19:59
This btw is method 2) I posted earlier.
Norbert Haberl
@nhaberl
Mar 12 2018 20:34
Why you are not using a simple decorator for that?
Btw how can I trigger an event within a decorator? Or even access the ractive instance?
kouts
@kouts
Mar 12 2018 20:36
This is just a "barebones" example. you can adjust it to your liking.
Paul Maly
@PaulMaly_twitter
Mar 12 2018 20:37
Decorator is invoking in instance context.
Moreover, using decorators you don't need to use observing of a data manually
kouts
@kouts
Mar 12 2018 20:44
yeah probably this example can be transformed into a decorator
Norbert Haberl
@nhaberl
Mar 12 2018 20:50
Can anybody tell me how I can fire a event within decorator?
Paul Maly
@PaulMaly_twitter
Mar 12 2018 20:50
this.fire()
Decorator is invoking in instance context.
Norbert Haberl
@nhaberl
Mar 12 2018 20:51
I was pretty sure that it did not work.
Thanks gonna try it tomorrow
Paul Maly
@PaulMaly_twitter
Mar 12 2018 20:57
Bruce Tu
@brtu
Mar 12 2018 20:59
@kouts thanks for the example, this looks very helpful
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:00
as you can see, decorators gives us the convenient way to work with DOM manually, but still stay up-to-date with Ractive state.
Norbert Haberl
@nhaberl
Mar 12 2018 21:01
@PaulMaly_twitter Awesome! That should be in the docs!
Norbert Haberl
@nhaberl
Mar 12 2018 21:02
Is there another way
I know these docs but your sample is more complete
Is there another way that a decorator can Listen to events?
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:07
yep, unfortunately, current docs have many white spaces. So, sometimes I still use old docs to recollect some things, but old docs are not valid sometimes.
Is there another way that a decorator can Listen to events?
Ractive has many ways to doing the same things. What way do you prefer ?
In my example decorator not listen to events, but produce it
Norbert Haberl
@nhaberl
Mar 12 2018 21:09
Sorry that is what I mean
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:10
So, what way do you prefer ?
Norbert Haberl
@nhaberl
Mar 12 2018 21:10
I have a table jquery plugin and want to Show a modal when clicked in a row
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:11
do you have any way to handle click on a row using jquery plugin?
for example:
const $table = $(node).datatable({
      onClick: () => {

      }
})
?
?
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:17
Seems some things like this should work:
const $table = $(node).DataTable();

$table.on( 'select',  ( e, dt, type, indexes ) => {
    if ( type === 'row' ) {
        let data = $table.rows( indexes ).data().pluck( 'id' );
        this.fire('table:select', data);
    }
} );
inside of decorator
and in Ractive's component:
on: {
      'table:select': function(ctx, data) {
            // show modal using data
       }
}
Norbert Haberl
@nhaberl
Mar 12 2018 21:21
Man that looks nice, gonna try it tomorrow
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:22
yea, decorators are very cool tool for these things
Actually, I never had any problems to integrate any 3rd-party libs and plugins in Ractive app, except a case if it plugin has no good api itself
Norbert Haberl
@nhaberl
Mar 12 2018 21:24
Absolutely, thats why I am surprised that the docs are of less Info
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:25
Sometimes it could help
Norbert Haberl
@nhaberl
Mar 12 2018 21:25
I have tons of jquery plugins in my site and Ractive.js is the only framework which can handle that
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:26
Tagline of a day: "Ractive - your issues already solved before you knew about them"
:smile:
Norbert Haberl
@nhaberl
Mar 12 2018 21:28
:smile:
Really wonder why it's rather unpopular but I like it really
Paul Maly
@PaulMaly_twitter
Mar 12 2018 21:36
I have two theories about it:
1) Ractive was too innovative at the time it appears (2012-2013 years). In my country, we've saying: "Innovators must die", except a case if they have much money (Facebook React example).
2) Bad versioning. It psychological stopper to use something before version 1.0
I don't know any other reasons
Joseph
@fskreuz
Mar 12 2018 22:19
#1 is usually feared by developers (new tech, unknown sorcery). #2 is usually feared by management (new tech, uncertain future). :grin:
Paul Maly
@PaulMaly_twitter
Mar 12 2018 22:20
yep