Fractal: Question: Use API to render component with custom context?
Hi @allmarkedup,
Just wanted to check whether I'm on the right page here … Can I use the Fractal API to return the markup for a rendered instance of a component (passing in a custom context object)?
I'm thinking along the lines of Rizzo where the style guide also functions as a kind of _UI server_.
Something like:
var html = fractal.component('@handle').render(ctx);
Am I on the right track? If so, how do I get there?
Many thanks, and awesome job with Fractal!
Brett
brettgullan
All 4 comments
Hi @brettgullan - yes indeed you can! In fact that is what I hope will become one of the main uses cases for the API.
However the documentation around the API and integration examples is all pretty sparse at the moment I'm afraid. But a simple example of finding and rendering a component would look something like this:
var ctx = {
title: 'custom context data'
};
fractal.components.load().then(() => {
var component = fractal.components.find('@handle');
if (component) {
component.render(ctx).then(html => {
// render method returns a Promise that
// resolved to the rendered template HTML
console.log(html);
});
}
});
I'm currently on holiday so a little slow at replies but if you have any specific questions around this just let me know and I'll try and help out where I can :-) And I'm hoping to get more API docs up as soon as possible which will make it much easier for people I think!
allmarkedup
on 18 Aug 2016
As an aside... you can also get fractal to render templates that are _not_ in your component library, but _do_ consume the components. for instance, if you could have an app-specific index.hbs template that is not in your component library but _does_ include a component using @handle references, like so:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
</head>
<body>
<h1>{{ appTitle }}</h1>
<p>Click here: {{> '@button' buttonData }}</p>
</body>
</html>
Then you could render that template like this:
fractal.components.load().then(() => {
fractal.components.render('./index.hbs', {
appTitle: 'My App',
buttonData: {
text: 'Log in ->'
}
}).then(html => {
console.log(html)
});
});
Even though your 'app' template is not part of your component library, using fractal to render it will ensure that you can reference components within it via the same @handle syntax.
Hope that helps!
allmarkedup
on 18 Aug 2016
Hi @allmarkedup,
Fantastic! Thanks for your detailed response; good to know I'm on the right track. For a guy who's 'on holiday' you're managing to do a fair bit of work.
The external template rendering option is very cool. Looking forward to playing with that.
Many thanks again,
Brett
brettgullan
on 18 Aug 2016
No worries @brettgullan, and let me know if you have any more questions!
allmarkedup
on 22 Aug 2016
Related issues
fvanderwielen
·
4Comments
julmot
·
3Comments
allmarkedup
·
5Comments
coreybruyere
·
5Comments
allmarkedup
·
7Comments