Search code examples
componentsinstanceractivejsractive-load

Access an instance of a component created by Ractive Load

Inside a component, I am happily using the syntax below to load additional components, if and when needed:

<!-- Import example component -->
<link rel='ractive' href='internal-example.html' name='InternalExample'>

My question is, how can I access this example component instance created by Ractive Load inside another component?

Important:

I can define where the main components will be stored and I can see ...anotherMainComponent.components.InternalExample but it doesn't appear to be a instance, since I can't use get or set

Instead it appears to be a "component definition" to be reused (which is fine to me).

Solution

  • You can use the findComponent method:

    // assuming `ractive` is the top-level instance
// (i.e. `ractive = new MyComponent(...)`)
var internalExample = ractive.findComponent( 'InternalExample' );

    ractive.findAllComponents is a related method - docs here and here.