2017-10-19 5 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> 

서버 측 :

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' 구성 요소를 가져올 필요가 없습니다. 당신은'import' 문을 삭제할 수 있습니다. 다음을 수행하십시오 :

답변

2

모듈 bundler/asset 파이프 라인을 통합해야합니다. 샘플 marko-express에서 우리는 Lasso (자산 파이프 라인 + 자바 스크립트 모듈 번들러)을 사용하고 있습니다.

웹팩을 통합 다른 샘플 응용 프로그램도 있습니다 : https://github.com/marko-js-samples/marko-webpack

마르코 팀은 올가미와 웹팩 모두 지원하지만이 간단하고 최소한의 구성을 필요로하기 때문에 우리는 올가미 좋습니다.

하면 marko-express 응용 프로그램을 살펴보고 당신이 박히 경우 우리 Gitter 대화방에서 질문을 주시기 바랍니다 : https://gitter.im/marko-js/marko

+0

고마워, 나는 올가미가 이것을 위해 필요하다는 것을 깨닫지 못했고, 거터 링크 –