初始化应用

你已经有了基本的页面布局和需要用的CSS以及JS文件。现在我们需要初始化我们的应用，比如在 my-app.js中

var myApp = new Framework7();

上面这个例子中我们使用了 myApp 作为变量名存储 Framework7 初始化之后的实例。

这样初始化非常简单，但是Framework7 也提供了更多个性化的定制，只需要在初始化的时候传入一个配置对象即可。

var myApp = new Framework7({
    pushState: true,
    swipePanel: 'left',
    // ... other parameters
});

下面是这个变量的列表：

最终你写在 my-app.js 中的代码可能会是这样的：

var myApp = new Framework7({
    // Default title for modals
    modalTitle: 'My App',
 
    // If it is webapp, we can enable hash navigation:
    pushState: true,
 
    // Hide and show indicator during ajax requests
    onAjaxStart: function (xhr) {
        myApp.showIndicator();
    },
    onAjaxComplete: function (xhr) {
        myApp.hideIndicator();
    }
});   

预处理内容

Framework 可以让你用自己喜欢的客户端模板引擎，或者在内容加载之后再做任意修改。

让我们看看如何在初始化应用的时候把 Template7 当做我们自己的客户端模板引擎。

var myApp = new Framework7({
    preprocess: function (content, url, next) {
        if (url === 'people.html') {
  var template = Template7.compile(content);
  var resultContent = template({
      title: 'People',
      people: ['John', 'Ivan', 'Mary']
  })
  return resultContent;
        }
    }
});

And the people.html page:

<div class="navbar">
  <div class="navbar-inner">
    <div class="center">{{title}}</div>
  </div>
</div>
<div class="pages">
  <div data-page="people" class="page">
    <div class="page-content">
      <ul>
        {{#each people}}
        <li>{{this}}</li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>

有时候你会在预处理方法中有一些异步的逻辑，比如你用ajax来加载页面。这种情况下，我们提供了 "next" 回调函数，用来传入我们编译或者修改后的内容：

var myApp = new Framework7({
    preprocess: function (content, url, next) {
        if (url === 'people.html') {
  // For example, we will retreive template JSON data using Ajax and only after that we will continue page loading process
  $$.get('sometemplate.html', function(data) {
      // Template
      var template = Template7.compile(content);
 
      // Compile content template with received JSON data
      var resultContent = template(data);
 
      // Now we call "next" callback function with result content
      next(resultContent);
  });
  // Now we shouldn't return anything
        }
    }
});          

"prerouter" 示例

这个回调函数可以用来阻止路由器默认的 加载/返回 行为，你可以自己去加载其他页面，重定向，或者做任意你需要的操作。

比如我们在用户访问某些页面的时候可以去检查他是否登录，如果未登录就跳转到登录页面

var myApp = new Framework7({
    preroute: function (view, options) {
        if (!userLoggedIn) {
  view.router.loadPage('auth.html'); //load another page with auth form
  return false; //required to prevent default router action
        }
    }
});

下一步

在初始化应用之后，我们需要添加并初始化 视图