Comments (3)
Hi @bkniffler, a custom tag is just a mapping to a render(input, out)
function that gets resolved at compile time. It's possible to invoke a render function directly instead of going through a custom tag and I think that might help in your case. This is done using the <invoke>
tag as shown below:
<!-- 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 template.render(input, out)
function so you could also do the following:
<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 *.marko.html
extension for the optimizer-marko plugin so you might need to send a PR for the plugin.
Does this help in your use case? If not, please provide more details.
from marko.
@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 type
or layout
attribute. Consider the case where you might want to do something like this:
<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 (app-info-message
, app-warning-message
, and app-error-message
, for example).
In this example, app-message
may have a template for each type of message. The app-message
renderer would simply choose the right template based on the type.
The app-message
component would have a renderer.js
with something like this:
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).
from marko.
@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 include
-tag. It seems to do all the required stuff like loading and rendering.
<include template="app/components/$!{item.component}/template.marko.html" value="$!{item.value}">
This will help me get started for now!
I will add .marko.html support to optimizer-marko in the next days.
from marko.
Related Issues (20)
- Bug: broken link in CONTRIBUTING.md HOT 1
- bug: no such script in packages.json HOT 1
- try catch not supported when rendering
- error when rendering with $!{} in .marko file HOT 3
- Typescript: add missing directives
- TypeScript: add event handlers like `onclick` to native tags, with type `AttrString`
- TypeScript: Passing Attributes to Body Content Will Loose Type HOT 3
- Webpack error on Marko versions greater than 5.31.0 HOT 5
- Deprecation warnings in Chrome HOT 5
- `onInput` is not running when it is used in `component-browser.ts` HOT 1
- Static functions or arrow functions do not work on components without a class statement
- How does routing work? HOT 2
- Marko not properly tracking dependency updates in some situations when using the tags-api
- `Marko is not defined` when index.marko imports module from component.ts
- Cannot break generic parameter declarations into multiple lines HOT 3
- Specify Node Engine Constraint in package.json
- Removing a class attribute results in a "null" class HOT 5
- Out-of-order HTML streaming without JS using Declarative Shadow DOM HOT 15
- Uncaught DOMException on Marko 5.33.14 HOT 15
- Difference in dev/production builds
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from marko.