index.html
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>webapp</title>
<link rel="stylesheet" href="./css/todos.css">
<script src="jquery.min.v1.7.1.js" type="text/javascript"></script>
</head>
<body>
<div class="loadingHtml"></div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
main.js
$.get("./template/item-template.html",function(data){
console.info(data);
// alert(data); // 用于在ie6和8中进行测试
$(".loadingHtml").append(data);
});
item-template.html
<div id="todoapp">......</div>
---------------------------------------------------------------
【PC端-windows】/如不做特殊说明,皆为在线测试/
safari:可以说最给力了;可以console。info出item-template.html中的html,还可以将html插入到index.html中。见图:
chrome:
/在线测试/正常打印和插入,见safari截图。不多话。
/本地测试/,报错提示如下:XMLHttpRequest cannot load file:///C:/Users/Administrator/Desktop/Backbone.js%20Todos/template/item-template.html. Origin null is not allowed by Access-Control-Allow-Origin.
firefox:
/在线测试/正常打印和插入,见safari截图。不多话。
/本地测试/打印出Document 对象,无内容插入到index.html中。如图:
ie9:不错,这次跟safari的表现形式一样。可以打印出数据,也可以插入到主页面中。(同safari一样,打印出来的数据,跟html中的结构样式一模一样,连空格和换行都照样搭出来了。)见图:
ie6:有弹出框,可以插入。如图:
ie8:无弹出框,可插入。见图:
---------------------------------------------------------------
【移动端】
/在线测试/
【台电八寸平板】安卓系统、 内置uc浏览器。对于台电的外形触感体验等等等等,我无力吐糟。正常弹出和插入数据。截图就懒得上了。(热不住再说一句,这玩意,alert弹出框,内容那么长,竟然只能显示一部分,不可以上下滑动,我勒个去。)
【ipad mini】ios5+系统、内置safari浏览器。正常弹出和插入数据。截图免。
【三星note2】安卓4.0+、uc浏览器和内置浏览器。皆可正常弹出和插入。截图免。
/套在Phonegap中,在真实环境下测试/
【台电八寸平板】安卓系统、 内置uc浏览器。无压力,正常显示。
---------------------------------------------------------------
使用backbone时,由于模板太多,所以考虑将模板拆分到不同的html文件。在启用backbone框架之前,先生成模板。具体方法如下:(简略例子)
// 如果是在线webapp应用,则可以直接采用这种方式来获取template模板html文件中的内容
// 已经通过测试。具体测试报告见oschina
// 外层可以直接套backbone框架
// 生成所有模板之后,再启动backbone框架,可以考虑在启动之前加启动动画,等等。
// 后期可以考虑将页面中的js文件全部在main.js中导入进入。可以考虑换成js原生态写法,不依赖插件。
var tempName = ["item","stats"];
var tempStr = {};
var j = 0;
var callback = function(data){
tempStr[tempName[j]] = data;
console.info(tempStr[tempName[j]]);
j++;
if (tempName[j]){
$.get("./template/" + tempName[j] + "-template.html",function(data){
callback(data);
});
} else {
$("body").append("<script src='./mvc/todos.js' type='text/javascript'></script>");
}
};
$.get("./template/" + tempName[j] + "-template.html",function(data){
callback(data);
});