My component is loading fine but the styles are not loading, nor are the events firing. I am following the documentation and no errors are being thrown but it seems I might be missing something fundamental here?
View template rendered with res.marko:
import Explanation from "./components/explanation.marko";
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
...
<include(Explanation, input.explanation) />
...
</body>
</html>
explanation.marko file:
class {
onExplanationClick() {
console.log("Explanation clicked");
}
}
style {
.explanation-paragraph {
color: red;
}
}
<div id="explanation" on-click('onExplanationClick')>
<for (paragraph in input.content)>
<p class="explanation-paragraph">${paragraph}</p>
</for>
</div>
Server side:
app.get("/explanation/:id", async function(req, res) {
var explanation = await findExplanation(req.params.id);
var template = require("../../views/explanation/explanation.marko");
res.marko(template, { explanation, user: req.user });
});
Also using marko/node-require and marko/express.
You will need to integrate a module bundler/asset pipeline. In the sample marko-express app we are using Lasso (an asset pipeline + JavaScript module bundler).
There's also another sample app that integrates Webpack: https://github.com/marko-js-samples/marko-webpack
The Marko team supports both Lasso and Webpack, but we recommend Lasso because it is simpler and requires minimal configuration.
Please take a look at the marko-express app and feel free to ask questions in our Gitter chat room if you get stuck: https://gitter.im/marko-js/marko