ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> web前端 >> Framework7 模板引擎

Framework7 模板引擎

来源:网络整理     时间:2018-08-12     关键词:

本篇文章主要介绍了" Framework7 模板引擎",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下: 通过路由配置后端地址,后端怎么把值传到前台渲染?这个时候就需要用到模板引擎了。Framework7 可以让你使用 Template7 用特定的上下文来渲染你的a...

通过路由配置后端地址,后端怎么把值传到前台渲染?这个时候就需要用到模板引擎了。Framework7 可以让你使用 Template7 用特定的上下文来渲染你的ajax页面或者动态页面,并且提供了很多不同的方法来实现。Template7的简单使用

在html上面写上你要加载的模版

<script type="text/template7">
    <p>Hello, my name is {{firstName}} {{lastName}}</p>
</script>

 在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(首页)
这个没什么特别的,直接就是一个链接。点击跳转到列表页面。 
<!DOCTYPE html>
<html>
<head>
    <!-- meta标签设置-->
    <meta charset="utf-8">
    <meta name="viewport" c c c href="css/framework7.ios.min.css">
    <!-- iOS related颜色样式 -->
    <link rel="stylesheet" href="css/framework7.ios.colors.min.css">
    <!-- 自定义样式-->
    <link rel="stylesheet" href="css/my-app.css">
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div></div>
<!-- 所有的Views视图 -->
<div>
    <!-- 主视图(需要有"view-main"样式) -->
    <div>
        <!-- 顶部导航栏 -->
        <div>
            <div>
                <!-- 标题元素(为了让页面切换时标题文字有滑动效果,添加sliding样式) -->
                <div>hangge.com</div>
            </div>
        </div>
        <div>
            <!-- 首页, "data-page" 里设置页面名字 -->
            <div data-page="index">
                <div>
                    <div>
                        <p><a href="list.html">打开列表页面</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Framework7框架的js-->
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- 你的应用的js -->
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
(3)list.html(列表页面)
我们通过 T7 的 each 表达式来遍历新闻集合并显示。
这里要注意页面上配置的 data-page="list"。说明这里用到的全局的上下文数据是从上面 Framework7 初始化的时候,template7Data 参数里面"page:list"对象中获取的。 
<!-- 这个页面由于会通过Ajax加载,所以我们不需要实现完整的布局,只需添加.navbar和.page即可-->
<!-- 顶部导航栏 -->
<div>
    <div>
        <div>
            <a href="#">
                <i></i>
                <span></span>
            </a>
        </div>
        <div>{{title}}</div>
        <div>
        </div>
    </div>
</div>
<div>
    <div data-page="list">
        <div>
            <div>
                <ul>
                    <!-- 循环遍历新闻列表 -->
                    {{#each this.news}}
                    <li>
                        <a href="#">
                            <div><i></i></div>
                            <div>
                                <div>{{this.title}}</div>
                                <div>{{this.date}}</div>
                            </div>
                        </a>
                    </li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </div>
</div>
通过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 设为 #
<a href="#">打开列表页面</a>
(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

相关图片

相关文章