// 模板内容
	var template = `
		<div data-page="home" class="page">
	        <div class="page-content">
	            <div class="content-block">
	                <p>Here are the list of people i know:</p>
	                    <ul>
	                        {{#each people}}
	                            <li>{{firstName}} {{lastName}}</li>
	                        {{/each}}    
	                    </ul>          
	            </div>
	        </div>
	    </div>`;

	// 数据
    var data = {
        people : [
            {
              	firstName: 'John',
              	lastName: 'Doe'
            },
            {
              	firstName: 'Mark',
              	lastName: 'Johnson'
            },
        ]
    };

	// 编译模板这一步可能是将模板缓存，方便之后快速调用
	var compiledTemplate = Template7.compile(template);

	// 使用模板加载数据
	var htmlStr = compiledTemplate(data);

	//将得到的结果输出到指定区域
	$("body").append(htmlStr);

// 初始化
var myApp = new Framework7();

// 添加视图
var mainView = myApp.addView('.view-main');

// 切换视图中的链接，用以替换内容
mainView.router.load({
    url: "/index.html",
});

// 后退 ：切换视图中的链接，用以替换内容
mainView.router.back({
    url: "/demo.html",
});

// Init app
var myApp = new Framework7();
 
// Init main view
var mainView = myApp.addView('.view-main');
// 动态页面的写法
// HTML Content of new page:
var newPageContent = `<div class="page" data-page="my-page"> 
                        <div class="page-content"> 
                          <p>Here comes new page</p> 
                        </div> 
                      </div>`;
 
// 方法一
mainView.router.loadContent(newPageContent);

// 方法二
mainView.router.load({
  content: newPageContent,
  animatePages: false
});

// 启用内敛功能
var mainView = myApp.addView('.view-main', {
    domCache: true //enable inline pages
});

// 当Framework7把新页面(必须带有data-page属性)插入到DOM的时候会触发。
myApp.onPageBeforeInit(pageName, callback(page)) 

// pageName - string - 页面的 "data-page" 属性
// callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

var total = myApp.onPageInit('home', function(page){
    console.log("home页面被触发了");
});

total.trigger();// home页面被触发了

$$('.message').on('click', function () {
    myApp.addNotification({
    	// 主标题
        title: '真是个酷炫狂拽的App',
        // 小标题
        subtitle: '来自土豆的消息',
        // 内容
        message: '地瓜地瓜，土豆呼叫地瓜。在9点方向发现如花，BalaBalaBala',
        // 头像
        media: '<img width="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
        // 关闭按钮回调
        onClose: function () {
            myApp.alert('通知被关闭了~');
        }
    });
});

// Option 1. Using one 'pageInit' handler for all pages (recommended way):
$$(document).on('pageInit', function (e) {
  // Do something here when page loaded and initialized
})
 
// Option 2. Using live 'pageInit' event handlers for each page (not recommended)
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
  // Do something here when page with data-page="about" attribute loaded and initialized
}) 

// In page callbacks:
myApp.onPageInit('about', function (page) {
  // "page" variable contains all required information about loaded and initialized page 
})
 
// In page events:
$$(document).on('pageInit', function (e) {
  // Page Data contains all required information about loaded and initialized page 
  var page = e.detail.page;
})

// 全局选择，隐藏选中的导航栏
myApp.hideNavbar(".navbar");// showNavbar

// 隐藏当前page导航栏
// 列如：

// 当前视图
var mainView = myApp.addView('.view-main');
mainView.hideNavbar();// showNavbar

// 初始化框架
var myApp = new Framework7({
  // ...
});   

// 添加视图，f7框架的视图都是需要注册的，事件不注册，就无法跳转
var mainView = myApp.addView('.view-main', {
  dynamicNavbar: true
})

var myApp = new Framework7({
  // ...
});   
 
// Initialize views 
// 初始化视图，
var mainView = myApp.addView('.view-main', {
  dynamicNavbar: true,// 在当前View中是否使用动态导航栏
  url: undefined,// View 默认的 url，如果没有定义，则就是当前文件的路径
  domCache: false,// 是否要进行dom缓存
  // 另一个View的CSS选择器，默认情况下，所有的链接都会被加载到当前的页面。
  // 可以指定讲当前view中链接加载到另一个View中。
  linksView: undefined
})

var anotherView = myApp.addView('.another-view');