加拿大28

    1. <form id='t8uxx'></form>
        <bdo id='t8uxx'><sup id='t8uxx'><div id='t8uxx'><bdo id='t8uxx'></bdo></div></sup></bdo>

            您好,欢迎来到[码蚁之家]阅读室  笑话大全  编程问答  问答大全  移民之家  娱乐之家  范文之家  源码下载  电子书籍  软件下载  专题
            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)这个新页面中加拿大28通过 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(列表页面)
            加拿大28通过 T7 的 each 表达式来遍历新闻集合并显示。
            这里要注意页面上配置的 data-page="list"。说明这里用到的全局的上下文数据是从上面 Framework7 初始化的时候,template7Data 参数里面"page:list"对象中获取的。 
            <!-- 这个页面由于会通过Ajax加载,所以加拿大28不需要实现完整的布局,只需添加.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://bayitaku.com/article/detail_4583127.html

            相关图片

            相关文章