Please indicate the source of the original reprint: http://agilestyle.iteye.com/blog/2354225
Prerequisite
http://agilestyle.iteye.com/blog/2354215
Project Directory
SRC
marko-taglib.json
{
"tag-dir": "./components"
}
src/components/app-hello/template.marko
<div>
Hello ${data.name}! You have ${data.messageCount} message(s).
</div>
src/components/app-hello/index.js
var template = require('./template.marko');
module.exports = function(input, out) {
var name = input.name;
var messageCount = input.messageCount;
if(name) {
name = name.toUpperCase();
} else {
name = 'annoymous';
}
template.render({
name: name,
messageCount: messageCount
}, out);
}
src/pages/home/template.marko
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Marko Demo</title>
</head>
<body>
<h1>Marko Demo</h1>
Hello ${data.name}
<ul if(data.colors)>
<li for(color in data.colors)>
${color}
</li>
</ul>
<div else>
No colors!
</div>
<app-hello name="Marko" message-count="30"/>
<app-hello message-count="1"/>
</body>
</html>
Run & Test
marko-tag.json
Create a new marko-tag.json file in the src/components/app-hello directory
Add a new line to src/pages/home/template.marko as follows:
<app-hello invalid="error" />
Start the server, it will directly report the following error:
Reference
https://www.youtube.com/watch?v=00xBpj89AkY