一、当需要注入大段的HTML标签到页面中时,应该使用服务器渲染(从服务器加载HTML标签)
该方法将模板放置于服务器中使用XMLHttpRequest对象来获取外部标签(如多页应用)
错误处理代码
}
};
xhr.send(null);
}
//使用YUI的API
function loadDialog(name,oncomplete) {
Y.one('#dlg-holder').log('/js/dialog/'+name,oncomplete);
}
//使用JQuery的API
function loadDialog(name,oncomplete) {
$('#dlg-holder').load('/js/dialog/'+name,oncomplete);
}
二、客户端模板对于少量的标签段,应该考虑采用客户端模板。
客户端模板是一些带‘插槽'(占位符)的标签片段,这些占位符会被JavaScript程序(模板引擎)替换为数据,然后把该替换好的标签片段插入到页面中。
自定义模板文本处理程序
模板文本存放位置1.存放于HTML注释中
...
因为注释也是一个DOM节点,因此可以通过JS将其提取出来:
方法定义
function addItem(url,text){
var mylist = document.getElementById('mylist');
var templateText = mylist.firstChild.nodeValue; //提取模板文本
var result = sprintf(templateText,url,text);
div.innerHTML = result;
mylist.insertAdjacentHTML('beforeend',result);
}
//调用方法
addItem('/item/4','First item');
addItem('/item/4','Second item');
2.存放于自定义type属性的script标签内
提取模板文本
var result = sprintf(templateText,text);
var div = document.createElement('div');
div.innerHTML = result.replace(/^\s*/,''); //去除模板文本的前导空格(因为它是在
funtion addItem(url,text){
var mylist = document.getElementById('mylist'),script = document.getElementById('list-item'),template = Handlebars.compile(script.text),//提取模板文本,返回格式化方法
div = document.createElement('div'),result;
result = template({text:text,url:url});
div.innerHTML = result;
mylist.appendChild(div.firstChild);
}
//调用
addItem('/item/4,'First item');
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!