These are chat archives for ractivejs/ractive

8th
Sep 2018
kouts
@kouts
Sep 08 2018 11:58
I'm trying to understand and utilize macro partial to create dynamic "view" switching. I'm hosting this macro partial inside a "View" component. Is there anyway that the macro partial gets a reference of the host component?
I hope I'n using the "right tool for the job" :smile:
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:05

I'm not clear about the target achievement. will it simply do

{{#if something}}
    <component1 />
{{else}}
     <component2 /> 
{{/if}}

under the hood?

kouts
@kouts
Sep 08 2018 13:06
yes, but component is dynamic
so it's something like
<${name} />
I found out how to get ractive parent instance from Macro partial, it's:
kouts
@kouts
Sep 08 2018 13:09
const ViewMacro = Ractive.macro(
    (h, attrs) => {
        let r = h.ractive;
    },
    {
        attributes: ['name']
    }
);
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:09
this synchronizer simply does the same thing under the hood
it renders <foo ... /> and when foo2 component is ready (fetched from server) it removes <foo ... /> and puts <foo2 ... /> in place
kouts
@kouts
Sep 08 2018 13:11
nice!
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:11
kouts
@kouts
Sep 08 2018 13:11
I'm trying to do something similar
I was looking at this last night :smile:
Imagine something like "Scenes" in your setup
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:16
what is the advantage over using {{#if ...}} {{else}}?
besides, my Scene mechanism uses display: none css to manage the scene visibilities for performance reasons
kouts
@kouts
Sep 08 2018 13:17
I don't know what view is going to be rendered beforehand
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:18
let's start from beginning, what is the "end product"?
do you want to build a scene mechanism?
kouts
@kouts
Sep 08 2018 13:18
The ultimate concept is to load views inside the host by demand
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:18
ahahah :D everyone of us is after that! :D
kouts
@kouts
Sep 08 2018 13:18
ahahaha
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:19
okay, I have managed to do this
kouts
@kouts
Sep 08 2018 13:19
What I have in mind is this
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:19
what doesn't ractive-synchronizer cover in your case?
kouts
@kouts
Sep 08 2018 13:20
how can I try it?
is this a standalone thing I can import?
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:21
well, github repo should cover all information you'll need: https://github.com/ceremcem/ractive-synchronizer
if it doesn't, file an issue (or more :D )
kouts
@kouts
Sep 08 2018 13:23
It doesn't seem it is exactly what I'm trying to achieve but I'll give it a try, thanks @ceremcem
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:23
you welcome. what is your goal then?
kouts
@kouts
Sep 08 2018 13:25
Ok, the end goal is like this
Have all the Views assets described inside a db table
eg: View1 needs asset1.js, asset2.js
have all component assets described inside a db table
eg Component1 needs cmp1.js
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:27
in other words, you'll have your dependency graph statically in your database table
kouts
@kouts
Sep 08 2018 13:27
Also, what components that make up a view are also stored
yes
exactly
so when a new view is to be loaded
a request is made to the server
the server responds with what assets are needed to load the view
then use an asset loader (eg SystemJs) to load the required assets
and render the view
only difference is I don't manage separate dependencies, instead, I put all heavy components into one big asset2.js and load it after app is rendered
kouts
@kouts
Sep 08 2018 13:33
I see, I can only do that for my main libs
thanks for your help @ceremcem
Cerem Cem ASLAN
@ceremcem
Sep 08 2018 13:35
it's up to you, fetch any number of libraries, load them, emit their "ready" signal to let ractive-synchronizer upgrade the component
you welcome