本篇文章主要介绍了" Framework7 模板引擎"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下：
通过路由配置后端地址，后端怎么把值传到前台渲染?这个时候就需要用到模板引擎了。Framework7 可以让你使用 Template7 用特定的上下文来渲染你的a...
通过路由配置后端地址，后端怎么把值传到前台渲染?这个时候就需要用到模板引擎了。Framework7 可以让你使用 Template7 用特定的上下文来渲染你的ajax页面或者动态页面，并且提供了很多不同的方法来实现。Template7的简单使用
在html上面写上你要加载的模版
在js上调用Template7的语法，并且附上你要加载的数据
var template = $$('#template').html(); // compile it with Template7
var compiledTemplate = Template7.compile(template); // Now we may render our compiled template by passing required context
var context = { firstName: 'John', lastName: 'Doe' };
var html = compiledTemplate(context); 其中的html就是你要绘制的内容。
下面通过一个样例演示如何使用 Template7 页面：
（1）在首页点击“打开列表页面”后跳转到新闻列表页。
（2）这个新页面中我们通过 Template7 模板技术，将上下文数据填充到页面中来。
（1）my-app.js（应用的js）
要启用 Template7 页面功能，首先要在 Framework7 初始化的时候将其设置为 true。
同时要解析模板，必须提供必要的上下文（数据）对象。这里通过应用初始化参数 template7Data 设置全局的上下文数据。
// 初始化 app
var myApp = new Framework7({
precompileTemplates: true,
template7Pages: true, //pages启用Template7
template7Data: {
"page:list": { //news.json
title: "最新资讯",
news: [
{
title: "欢迎访问hangge.com",
date: "08-20"
},
{
title: "Framework7页面缓存设置",
date: "08-19"
},
{
title: "奥运健儿勇夺金牌",
date: "08-19"
}
]
}
},
});（2）index.html（首页）
这个没什么特别的，直接就是一个链接。点击跳转到列表页面。
（3）list.html（列表页面）
我们通过 T7 的 each 表达式来遍历新闻集合并显示。
这里要注意页面上配置的 data-page="list"。说明这里用到的全局的上下文数据是从上面 Framework7 初始化的时候，template7Data 参数里面"page:list"对象中获取的。
通过Ajax请求获取页面数据
实际开发中，页面数据并不都是一直不变的。而是通过 ajax 请求从外部，或者远程服务器上获取数据。
方法1：
在 Framework7 初始化 preprocess 方法中，对加载列表页面这个路由事件进行捕获。先通过 ajax 获取数据，数据获取后使用模板进行填充后再继续显示。
// 初始化 app
var myApp = new Framework7({
precompileTemplates: true,
template7Pages: true, //pages启用Template7
template7Data: {
},
preprocess: function (content, url, next) {
//判断如果是跳转到列表页面
if (url.indexOf("list.html") >= 0) {
//先获取数据
$$.getJSON("data/news.json", function (data) {
console.log(data);
//模板编译
var compiledTemplate = Template7.compile(content);
//模板数据加载
next(compiledTemplate(data));
});
} else {
//其他页面按正常流程走
next(content);
}
}
});方法2：
同样是先在 preprocess 方法中，对加载列表页面这个路由事件进行捕获。通过 ajax 获取数据后，将获取到的数据放到 Template7 上下文数据中。再继续加载页面。
// 初始化 app
var myApp = new Framework7({
precompileTemplates: true,
template7Pages: true, //pages启用Template7
template7Data: {
},
preprocess: function (content, url, next) {
//判断如果是跳转到列表页面
if(url.indexOf("list.html")>=0){
//先获取数据
$$.getJSON("data/news.json", function (data) {
console.log(data);
//设置上下文数据
Template7.data["page:list"] = data;
//页面继续跳转
next(content);
});
}else{
//其他页面按正常流程走
next(content);
}
}
});方法3：
不从链接直接跳转。而是在链接的 click 事件里先加载数据，数据加载完毕后将获取到的数据放到 Template7 上下文数据中。最后再加载列表页。 （1）首页跳转链接 href 设为 #
打开列表页面
（2）js相关代码
// 初始化 app
var myApp = new Framework7({
precompileTemplates: true,
template7Pages: true, //pages启用Template7
template7Data: {
}
});
// 为便于使用，自定义DOM库名字为$$
var $$ = Dom7;
// 添加首页视图
var mainView = myApp.addView('.view-main', {
// 让这个视图支持动态导航栏
dynamicNavbar: true
});
//跳转链接点击
$$('.open-list').on('click', function () {
//先获取数据
$$.getJSON("data/news.json", function (data) {
console.log(data);
//设置上下文数据
Template7.data["page:list"] = data;
//页面跳转
mainView.router.loadPage("list.html");
});
});
以上就介绍了 Framework7 模板引擎，包括了方面的内容，希望对web前端有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_4583127.html
