在微信上关注我们
Amaze UI Web 组件把一些常见的网页组件拆分成不同的部分，进行类似 Web Components 的封装（Web 组件简介、开发规范）。
Amaze UI 目前封装了 10 余个主要面向移动端的 Web 组件（独立窗口中浏览 Demo）。
通过模板（hbs）将数据和 HTML 分离，这是 Web 组件的价值之一。用户可以在不同的开发环境中使用 Web 组件。
Amaze UI 提供的开发模板中，包含一个 widget.html 文件，里面展示了 Widget 在纯浏览器环境中的使用。
要点如下：
handlebars.min.js；amui.widget.helper.js；<script type="text/x-handlebars-template" id="amz-tpl">{{>slider slider}}</script>；$(function() {
var $tpl = $('#amz-tpl');
var source = $tpl.text();
var template = Handlebars.compile(source);
var data = {};
var html = template(data);
$tpl.before(html);
});可以结合 Express.js、hbs 使用。
用户了可以直接使用打包好的模块 Amaze UI Widget hbs helper，example 里有完整的使用示例。
当然，你也可以自由调用：
首先，把 Web 组件的模板注册为 partial。
// ...
var hbs = require('hbs');
app.set('view engine', 'hbs');
hbs.registerPartials(widgetDir + '/slider/src');然后， 在页面模板中调用 partial，其中 data 为组件对应的数据。
{{>slider data}}参考以下链接：
无论你在上面那种环境中使用 Web 组件，都必须注册下面的 helper（我们提供的 amui.widget.helper.js 和 Node.js 模块中已经注册）:
(function(hbs) {
hbs.registerHelper("ifCond", function(v1, operator, v2, options) {
switch (operator) {
case "==":
return (v1 == v2) ? options.fn(this) : options.inverse(this);
case "!=":
return (v1 != v2) ? options.fn(this) : options.inverse(this);
case "===":
return (v1 === v2) ? options.fn(this) : options.inverse(this);
case "!==":
return (v1 !== v2) ? options.fn(this) : options.inverse(this);
case "&&":
return (v1 && v2) ? options.fn(this) : options.inverse(this);
case "||":
return (v1 || v2) ? options.fn(this) : options.inverse(this);
case "<":
return (v1 < v2) ? options.fn(this) : options.inverse(this);
case "<=":
return (v1 <= v2) ? options.fn(this) : options.inverse(this);
case ">":
return (v1 > v2) ? options.fn(this) : options.inverse(this);
case ">=":
return (v1 >= v2) ? options.fn(this) : options.inverse(this);
default:
return eval("" + v1 + operator + v2) ? options.fn(this) : options.inverse(this);
}
})(Handlebars);不使用模板似乎就失去了 Web 组件的核心价值，但有用户可能真想这么用。
这就回归到最原始的网页书写方式了：