ractivejs - Recursive component inclusion -

I'm looking at documents from Gibbs by Rich-Harris.

Foo component and its like this:

  & lt; Link rel = 'ractive' href = 'foo.html' name = 'foo' & gt; & Lt; P & gt; This is an imported 'foo' component: & lt; Foo / & gt; & Lt; / P & gt;  

Which I consider as a component to declare foo.html and call it on the foo tag, and it will not need to be a ractive.load (though I still did not understand where the data is being loaded).

Because it does not work at all (no load of component), I am thinking that I think this part is wrong.

Has anyone used it and can give me a complete example?

Components are independent of the automatic loading mechanism.

In the simplest form, components can be declared in JavaScript:

  Ractive.components.foo = Ractive.extend ({Template: '#foo' // id Script tags, or inline string, // other options may be}); Var ractive = New Reactive ({template: '
 This is a main view with the' foo 'component:  & lt; / p & gt;'});  

The components are covered in the docs.

There are several ways to package and load components. Using the link tag, in the form of your example, it is essential to actually use components to load:

  & lt ;! - The name is optional if the file is similar to the name - & gt; & Lt; Link rel = 'ractive' href = 'foo.html' name = 'foo' & gt; & Lt; Script src = 'ractive.js' & gt; & Lt; / Script & gt; & Lt; Script src = 'ractive-load.js' & gt; & Lt; / Script & gt; & Lt; Script & gt; // Calling Load () loads all link tags with no parameters and registers them as global components Ractive.load (). Then (function () {var ractive = new Ractive ({el: 'body', template: 'I & lt; foo / & gt; component is accessed!', Data: {...}}); // You get one component through the institute: var app = new Ractive.components.app ({... / options});} Handlear; & Lt; / Script & gt;