These are chat archives for ractivejs/ractive

13th
Oct 2018
kouts
@kouts
Oct 13 2018 09:01
Question: is there any way to pass methods from parent component to children?
Let's say there is a "save" method defined in the parent and all child components need to have access to it, how do you do that?
Do you have to define the "save" method inside the data ?
Paul Maly
@PaulMaly_twitter
Oct 13 2018 09:04
Yep
You can have functions in data object
kouts
@kouts
Oct 13 2018 09:06
I usually don't put methods that perform actions inside the data
kouts
@kouts
Oct 13 2018 09:33
is this the only way?
Paul Maly
@PaulMaly_twitter
Oct 13 2018 10:21
Use parent directly from child )
kouts
@kouts
Oct 13 2018 10:27
I'm doing it this way now yes, something like: this.root.findComponent('component').save_order(data);
Paul Maly
@PaulMaly_twitter
Oct 13 2018 10:30
this.parent.save_order(data) ?
kouts
@kouts
Oct 13 2018 10:32
yes, same thing
kouts
@kouts
Oct 13 2018 10:44
I'm thinking maybe I can utilize the use method and make a plugin that contains all shared methods and put them inside Ractive.helpers
Cerem Cem ASLAN
@ceremcem
Oct 13 2018 10:59

I usually don't put methods that perform actions inside the data

@kouts what is that mean? where do you put your functions?

kouts
@kouts
Oct 13 2018 11:59
I usually put them inside on: { ... } and inside instance methods
do you know if/how I can call a method that is defined inside the Ractive.helpers object from inside and instance method?
Chris Reeves
@evs-chris
Oct 13 2018 13:39
helpers are mostly meant to be view filter things and not really accessed from outside so much
are we taking app-wide shared functions, or component specific stuff?
I use my root instance for app-wide stuff and make it available as a global app
kouts
@kouts
Oct 13 2018 13:41
Specifically I have some "order" related functions, let's say orders_save, order_delete etc that I want them to be available inside many components
does that count as app-wide?
Chris Reeves
@evs-chris
Oct 13 2018 13:43
I would make a common super component for that
e.g. const Ordery = Ractive.extend(...); const MyInvoiceThingy = Ordery.extend(...);
kouts
@kouts
Oct 13 2018 13:45
Ahh ok, thanks!
would be a use case for a plugin also?
Chris Reeves
@evs-chris
Oct 13 2018 13:46
could, yes
make a plugin that drops methods on the instance
kouts
@kouts
Oct 13 2018 13:48
Now I have two solutions, thanks @evs-chris I'll try and see which one fits best.
Chris Reeves
@evs-chris
Oct 13 2018 13:49
I will say if you use typescript, extendWith is super handy
kouts
@kouts
Oct 13 2018 13:51
In this specific project I use ES2015+, (Webpack 4 + Babel 7) can I use extendWith ?
Chris Reeves
@evs-chris
Oct 13 2018 13:52
you can, as it works with es classes, but you don't get quite as much benefit without typings
it's really nice to have super methods complete on this in observers, event listeners, etc
kouts
@kouts
Oct 13 2018 14:31
I have tried the following:
export default function (opts) {
    opts.instance.save_order = function(data){

    }
}
and in the instance
use: [orders_common_methods]
but I get
Uncaught TypeError: this.save_order is not a function when called from the instance
I'm obviously doing something wrong here :smile:
Chris Reeves
@evs-chris
Oct 13 2018 14:35
where are you passing it to a use?
kouts
@kouts
Oct 13 2018 14:37
    import orders_common_methods from '../scripts/orders_common_methods';

    export default Ractive.extend({
        template: $TEMPLATE,
        use: [orders_common_methods],
        ...
Chris Reeves
@evs-chris
Oct 13 2018 14:38
that would install the methods on the component constructor
I think you want prototype rather than instance in your plugin
kouts
@kouts
Oct 13 2018 14:40
@evs-chris thanks, yes that was it, I used proto and it worked
kouts
@kouts
Oct 13 2018 15:20
So, I get the use of proto and Ractive inside the plugin, what would be the use of instance then, can you give an example?
Chris Reeves
@evs-chris
Oct 13 2018 15:23
it's for plugins that can be used in more than one scenario e.g. with extend and new
e.g. if proto === instance, this call is on new
kouts
@kouts
Oct 13 2018 16:51
@evs-chris you mentioned before about a common super component, how would that work? Do you have to attach it to a root instance somehow?
Chris Reeves
@evs-chris
Oct 13 2018 16:52
no, you just have to extend it with the components you use in your instance, rather than extending Ractive directly
extend effectively creates a prototypal subclass
kouts
@kouts
Oct 13 2018 16:53
Cool!