handlebars简单用法体验

<div id="demo">
</div>

模板写法

<script id="user-template" type="text/x-handlebars-template">
			<h1>{{time}}</h1>
			{{#each user}}
				<p>
				  {{#if name}}
                  {{@index}}.
                  姓名:{{name}}
                  年龄：{{age}}
                  <span class="age">是否成年：</span>{{Adult age}}
                  {{#Compare age 14 }}
                  大于等于14岁
                  {{else}}
                  小于14岁
                  {{/Compare}}
                  记录时间：{{../time}}        
				  {{/if}}
				</p>
			{{/each}}
			<span>{{time}}</span>
		</script>

<script src="./handlebars-v4.7.6.js">
<script>
			$(function() {
				var data = {
					user: [{
						name: "sky",
						age: 28
					}, {
						name: "rous",
						age: 10
					}, {
						name: "jack",
						age: 2
					}, {
						name: "joy",
						age: 18
					}],
					time: "2014-12-26"
				}
				var myTemplate = Handlebars.compile($("#user-template").html());
				Handlebars.registerHelper("Adult", function(age) { // 注册可以当前环境任意模块可以访问的助手代码(个人理解就是注册方法)
					return (age >= 18) ? "成年" : "未成年";
				});
				Handlebars.registerHelper("Compare", function(i1, i2, options) {
					if (i1 >= i2) {
						return options.fn(this);
					} else {
						return options.inverse(this);
					}
				});
				$("#demo").html(myTemplate(data));
			})
		</script>

更多参考https://www.handlebarsjs.cn/api-reference/runtime.html#handlebars-registerhelper-name-helper
摘自网上,侵权请留言,留个底子,已被不时之需.