2017-10-19 3 views
0

コンポーネントが正常に読み込まれていますが、スタイルがロードされていないか、イベントが発生していません。私はドキュメンテーションに従っており、エラーはスローされていませんが、ここで何か根本的なものが欠落しているようです。マークロテンプレートでスタイルとイベントが動作しない

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> 

サーバ側:マルコ/ノード必要とマルコ/ Expressを使用しても

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

+0

は、明示的に 'Explanation'コンポーネントをインポートする必要はありません。

答えて

2

モジュールのバンドル/アセットパイプラインを統合する必要があります。サンプルmarko-expressでは、Lasso(アセットパイプライン+ JavaScriptモジュールバンドラ)を使用しています。

のWebPACKを統合した別のサンプルアプリもあります:https://github.com/marko-js-samples/marko-webpack

は、マルコ・チームは、なげなわとWebPACKの両方をサポートしていますが、それは簡単で、最小限の構成を必要とするため、我々は投げ縄をお勧めします。

marko-expressアプリを見て、あなたが動けなくなる場合は、当社のギッターチャットルームで質問をすること自由に感じなさい:FYI https://gitter.im/marko-js/marko

+0

ありがとう、私はラッソがこのために必要とされていたことを認識していなかったし、ジッタリンクにも感謝しています –

関連する問題