NodeJS Marko custom tags Quick Reference

最新推荐文章于 2025-12-02 16:45:57 发布

原创最新推荐文章于 2025-12-02 16:45:57 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json

Node.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Marko模板引擎的示例项目。通过具体的代码示例，展示了如何定义组件和页面模板，并在页面中使用这些组件。同时，还演示了如何处理数据并将其渲染到页面上。

原创转载请注明出处：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>