-
Notifications
You must be signed in to change notification settings - Fork 640
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dynamic component assignment through attribute #24
Comments
Hi @bkniffler, a custom tag is just a mapping to a <!-- Loop over components, each which as a render function and an input model -->
<div for="item in data.components">
<!-- Invoke the render function for the current item using the current item's input model -->
<invoke function="item.render(item.value, out)"/>
</div> NOTE: A loaded template also has a <invoke function="item.template.render(item.value, out)"/> I'm not sure if you are using the RaptorJS Optimizer or Browserify, but the RaptorJS Optimizer supports dynamic requires while Browserify does not. Therefore, if you are using the RaptorJS Optimizer then you can send down all of the templates that may be needed on the client and dynamically require them instead of relying only on static code analysis. You can use a glob pattern to send down all of the templates in a directory as shown below: optimizer.json {
"dependencies": [
"*.marko"
]
} Those templates could be dynamically required doing something similar to the following: var template = require('marko').load(require.resolve('./components/' + componentName + '/template.marko')); NOTE: We currently don't register the Does this help in your use case? If not, please provide more details. |
@bkniffler I would recommend an approach that uses a single component/tag that simply delegates rendering to multiple other components/renderers. For example, I often run into the use case of choosing a template based on a <app-message type="info">${data.message}</app-message>
<app-message type="warning">${data.message}</app-message>
<app-message type="error">${data.message}</app-message> Depending on your use case, this might be simpler than having three separate tags ( In this example, The var marko = require('marko');
var TEMPLATE_BY_TYPE = {
info: marko.load(require.resolve('./info.marko')),
warning: marko.load(require.resolve('./warning.marko')),
error: marko.load(require.resolve('./error.marko'))
};
module.exports = function(input, out) {
// find the template that maps to the given type
var template = TEMPLATE_BY_TYPE[input.type];
if (!template) {
throw new Error('Invalid type "' + input.type + '".');
}
// now render the template
template.render(input, out);
} In summary, I think this logic of choosing a template would be easier to read if the developer moved this logic to the renderer. I don't think there would be much benefit of implementing this "choosing" logic in the template. Please let me know if you still don't think the solution from @patrick-steele-idem or myself would help in your use case (or if you are still looking for a more elegant solution). |
@philidem This is a nice approach, unfortunately not what I'm looking for. Thanks to both of you for taking the time to respond in such detail., this helped me understand marko more. And sorry for apparently not explaining my issue properly, when re-reading the docs I found a great solution already in place: the
This will help me get started for now! I will add .marko.html support to optimizer-marko in the next days. |
Hey,
This might be a hard thing to integrate, but I'd like to discuss it, maybe you will find it useful.
What want to accomplish is to load a component dynamically. Instead of using a html tag, I want to load it through a dedicated attributes value, lets say 'taglib'-attribute.
or
The problem is, if we'd like to be able to use every template available, we would need some sort of index with template names and their relative path. Alternatively, we could scope the available templates to only a certain directory, which would be easier, but not as clean.
This would require us to have a compiled template like this.
or
Of course we could check, if array contains element etc. This is just a dirty example. I know that this adds a bit of an overhead to the lightweight templates, especially if you got lots of components, but I couldn't think of any different/better way of doing this without sacrificing client-side compatibility. What do you think?
I could integrate it, though it will take me some time to dive into the code. A few hints where I find the responsible bits would surely help me.
The text was updated successfully, but these errors were encountered: