样式和事件在 marko 模板中不起作用答案

【问题标题】：Styles and events not working in marko template样式和事件在 marko 模板中不起作用
【发布时间】：2018-03-31 16:58:33
【问题描述】：

我的组件加载正常，但样式未加载，事件也未触发。我正在关注文档并且没有抛出任何错误，但似乎我可能在这里遗漏了一些基本的东西？

使用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>

服务器端：

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 });
});

也使用 marko/node-require 和 marko/express。

【问题讨论】：

仅供参考，您不需要显式导入 Explanation 组件。您可以删除 import 语句并执行以下操作：

标签： express marko

【解决方案1】：

您需要集成一个模块捆绑器/资产管道。在示例marko-express 应用程序中，我们使用Lasso（资产管道+ JavaScript 模块捆绑器）。

还有另一个集成了 Webpack 的示例应用：https://github.com/marko-js-samples/marko-webpack

Marko 团队同时支持 Lasso 和 Webpack，但我们推荐 Lasso，因为它更简单并且需要最少的配置。

请查看marko-express 应用程序，如果遇到困难，请随时在我们的 Gitter 聊天室提问：https://gitter.im/marko-js/marko

【讨论】：

谢谢，我没有意识到 Lasso 是必需的，也感谢 gitter 链接
仅链接的答案真的没有帮助。不知道为什么这被接受为答案。
@Hybridwebdev 这不仅仅是一个链接，这个答案指出了我所缺少的（模块捆绑器）并直接解决了我遇到的问题。该链接指向一些对我有更多帮助的示例代码。这很有帮助，这就是我接受它的原因。