How to use templates - 10 common examples
To help you get started, we’ve selected a few templates examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mipengine / mip-extensions-platform / mip-st-marketing / mip-st-marketing.js View on Github 
customElement.prototype.render = function (res) {
var self = this;
var element = this.element;
// 为组件填充模版
element.innerHTML = elementTemplate;
return templates.render(element, res).then(function (html) {
element.innerHTML = html;
self.elementHeight = element.offsetHeight;
});
};success: function (res) {
var data = {
icon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="209" width="209"><g fill-rule="evenodd" fill="none"><path stroke-linejoin="round" stroke-linecap="round" stroke-width="9" stroke="#3C76FF" d="M160.25 22.48C144.362 11.661 125.17 5.337 104.5 5.337c-54.766 0-99.163 44.397-99.163 99.163s44.397 99.163 99.163 99.163 99.163-44.397 99.163-99.163c0-13.314-2.624-26.015-7.382-37.614"></path><path d="M53.983 90.43l41.205 41.205L180.324 46.5" stroke-linejoin="round" stroke-linecap="round" stroke-width="9" stroke="#3C76FF"></path></g></svg>',
checkbox: {
unchecked: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill-rule="evenodd" fill="#EEE" d="M23.993 6C14.072 6 6 14.071 6 23.993c0 9.922 8.072 17.993 17.993 17.993 9.922 0 17.993-8.071 17.993-17.993C41.986 14.071 33.915 6 23.993 6m0 38.986C12.417 44.986 3 35.568 3 23.993 3 12.417 12.417 3 23.993 3c11.575 0 20.993 9.417 20.993 20.993 0 11.575-9.418 20.993-20.993 20.993"></path></svg>',
checked: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><g fill-rule="evenodd" fill="none"><path fill="#555" d="M23.993 44.986C12.417 44.986 3 35.568 3 23.993 3 12.417 12.417 3 23.993 3c11.575 0 20.993 9.417 20.993 20.993 0 11.575-9.418 20.993-20.993 20.993"></path><path fill="#FFF" d="M20.903 29.276l-5.36-5.592a1.464 1.464 0 0 0-2.092-.022 1.52 1.52 0 0 0-.017 2.132l6.063 6.265a3 3 0 0 0 4.27.042l12.6-12.52a1.493 1.493 0 0 0 .003-2.114 1.503 1.503 0 0 0-2.122-.004L22.33 29.294a1 1 0 0 1-1.427-.018z"></path></g></svg>'
},
text: querys.text || '',
xzhName: res.result.name
};
templates.render(element, data).then(function (html) {
element.innerHTML = html;
var subscribe = element.querySelector('.subscribe');
subscribe.addEventListener('click', function () {
var checked = [].slice.call(subscribe.classList).indexOf('checked') >= 0;
if (checked) {
subscribe.classList.remove('checked');
subscribe.classList.add('unchecked');
}
else {
subscribe.classList.add('checked');
subscribe.classList.remove('unchecked');
}
}, false);
var button = element.querySelector('.button');
button.addEventListener('click', function () {
// var checked = subscribe.classList.contains('checked');// 如果定制化组件属性有 no-padding 则把它的容器设置为 no-padding
// 组件属性 no-padding 必须设置一个值，哪怕是""，不然会被remove
if (customNode.hasAttribute('no-padding')) {
itemNode.classList.add('no-padding');
}
// XXX work around: 由于需要在template渲染后把渲染结果插入到itemNode，container里面，
// 只能把这些参数绑定在 customNode 里传给render.then中，通过res.element.itemNode获取
customNode.itemNode = itemNode;
customNode.container = container;
if (customNode.hasAttribute('mip-fixed')) {
moveToFixedLayer(element, customNode, container);
}
// 模板渲染
templates.render(customNode, result, true).then(function (res) {
res.element.innerHTML = res.html;
// XXX: 在模板渲染resolve后把custom element插入到页面
// 防止组件先插入页面后触发firstInviewCallback方法，但内容只有待渲染的template，
// 此时在组件中获取不到渲染后dom，无法绑定事件
res.element.itemNode.appendChild(res.element);
res.element.container.appendChild(res.element.itemNode);
if (res.element.hasAttribute('mip-fixed')
&& res.element.getAttribute('mip-fixed') === 'bottom') {
moveToFixedLayer(element, customNode, container);
fixedElement.setPlaceholder();
var zIndex = getCss(res.element.parentNode, 'z-index');
if (zIndex >= maxzIndex) {
maxzIndex = zIndex;
var now = Date.now();return null;
}
// html 处理
var customNode = createCustomNode(html, customTag);
var itemNode = document.createElement('div');
itemNode.setAttribute('mip-custom-item', len);
itemNode.appendChild(customNode);
container.appendChild(itemNode);
if (customNode.hasAttribute('mip-fixed')) {
moveToFixedLayer(element, customNode, container);
}
// 模板渲染
templates.render(customNode, result, true).then(function (res) {
res.element.innerHTML = res.html;
if (res.element.hasAttribute('mip-fixed')
&& res.element.parentNode.getAttribute('type') === 'bottom') {
fixedElement.setPlaceholder();
var zIndex = getCss(res.element.parentNode, 'z-index');
if (zIndex >= maxzIndex) {
maxzIndex = zIndex;
// alert(getCss(res.element, 'height') - 10)
fixedElement.setPlaceholder(getCss(res.element, 'height') - excr);
}
}
});
return customTag;if (typeof msg === 'string') {
var reg = new RegExp(textIdCard, 'ig');
le = msg.match(reg).length;
} else {
le = msg.length;
}
// 计算数据是否加载完毕
var size = data.size;
if (le === 0 || le % size !== 0) {
that.loadEnd = true;
}
// append元素
var $parentBox = $(data.parentBox);
templates.render(that.element, msg).then(function (html) {
$parentBox.append(html);
that.requestEnd = true;
that.$loading.hide();
!that.loadEnd && that.$btn.show();
});
},addDateFunction: function (htmldom, date) {
// 获取数据后，通过 template 模板渲染到页面的
templates.render(htmldom, date).then(function (html) {
htmldom.innerHTML = html;
});
}
};addDate: function (htmldom, date) {
// 获取数据后，通过 template 模板渲染到页面的
templates.render(htmldom, date).then(function (html) {
htmldom.innerHTML = html;
});
},
ifMatching: function () {addDate: function (htmldom, date) {
// 获取数据后，通过 template 模板渲染到页面的
templates.render(htmldom, date).then(function (html) {
htmldom.innerHTML = html;
});
},
ifMatching: function () {addDate: function (htmldom, date) {
// 获取数据后，通过 template 模板渲染到页面的
templates.render(htmldom, date).then(function (html) {
htmldom.innerHTML = html;
});
}function renderTemplate(data) {
var self = this;
if (data && data.items && data.items instanceof Array) {
templates.render(
self.element, data.items
).then(render.bind(self));
}
else {
console.error('数据不符合规范');
}
}templates
System for creating and managing template collections, and rendering templates with any node.js template engine. Can be used as the basis for creating a static site generator or blog framework.
