Template7 页面

优质

小牛编辑

144浏览

2023-12-01

Framework7 可以让你使用 Template7 用特定的上下文来渲染你的ajax页面或者动态页面，并且提供了很多不同的方法来实现.

首先，我们需要在应用初始化的时候传入一个参数来开启这个功能：

var myApp = new Framework7({
    template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});

这就是所有你需要做的，现在所有的Ajax和动态页面都会当做 Template7 模板来渲染，所以你可以在其中使用 Template7 语法

模板/页面数据

现在我们需要学习的是，如何把特定的上下文传递给指定的页面。我们可以在应用初始化的时候，传入一个附加的 templateData 参数：

var myApp = new Framework7({
    template7Pages: true, //enable Template7 rendering for pages
 
    //Specify templates/pages data
    template7Data: {
        // This context will applied for page/template with "about.html" URL
        'url:about.html': {
  name: 'John Doe',
  age: 38,
  company: 'Apple',
  position: 'Developer'
        },
 
        // This context will applied for page/template with data-page="contacts"
        'page:contacts': {
  tel: '(999)-111-22-33',
  email: 'contact@john.doe'
        },
 
        // Plain data object
        'languages': {
  'frontend': [
      {
          name:'JavaScript',
          description: 'Dynamic computer programming language[5]. It is most commonly used as part of web browsers, whose implementations allow...'
      },
      {
          name:'CSS',
          description: 'Style sheet language used for describing the look and formatting of a document written in a markup language...'
      },
  ],
  'backend': [
      {
          name: 'PHP',
          description: 'Server-side scripting language designed for web development but also used as a general-purpose programming language...'
      },
      {
          name: 'Ruby',
          description: 'Dynamic, reflective, object-oriented, general-purpose programming language...'
      }
  ]
        }
    }
});
 
// Add and init View
var mainView = myApp.addView('.view-main');

访问和修改模板/页面数据

我们可以在任何时候访问和修改 templateData。你可以通过全局的 Templates.data 属性，也可通过他的别名 myApp.templatesData 来访问

页面和URL 规则

这个很简单：

如果你的属性名是以 url: 开头的，那么这个上下文会被应用在这个特定的URL对应的页面上
如果你的属性名是以 page: 开头的，那么这个上下文会被用在有相同的 data-page 的页面上

推荐使用 url: 的方式来指定，因为这样检测的更准确一些。

但是，有些时候可能不能用 url:，比如你的页面有不同的GET参数(比如 about.html?id=1 和 about.html?id=2)，或者是动态页面，这种情况下我们要使用 page: 规则：

对于上面定义的模板数据，我们在页面中可以这样使用：

about.html:

<div class="page" data-page="about">
    <div class="page-content">
        <p>Hello, my name is {{name}} and i am {{age}} years old {{position}} at {{company}}</p>
    </div>
</div>

contacts.html:

         
<div class="page" data-page="contacts">
    <div class="page-content">
        <p>You can contact me:</p>
        <p>By phone: {{tel}}</p>
        <p>By email: {{email}}</p>
    </div>
</div>

普通数据

在模板数据中定义普通数据，可能会更灵活，更容易处理。我们可以通过在链接上使用 data-context-name 属性来加和使用这些数据.

让我们看看下面这个例子，我们有一个首页，首页中有一个链接会跳转到语言列表页面，语言列表页面会有一个链接跳转到语言详情页面：

index.html:

<div class="list-block">
  <ul>
    <li>
      <a href="languages.html" class="item-link item-content" data-context-name="languages">
<div class="item-inner">
  <div class="item-title">Languages</div>
</div>
      </a>
    </li>
  </ul>
</div>

languages.html:

<div class="page" data-page="languages">
  <div class="page-content">
    <div class="content-block-title">Frontend</div>
    <div class="list-block">
      <ul>
        <!-- Iterate through frontend languages -->
        {{#each this.frontend}}
        <li>
<!-- As a context name for this link we pass context path from template7Data root -->
<a href="language-details.html" class="item-link item-content" data-context-name="languages.frontend.{{@index}}">
    <div class="item-inner">
      <div class="item-title">{{this.name}}</div>
    </div>
</a>
        </li>
        {{/each}}
      </ul>
    </div>
    <div class="content-block-title">Backend</div>
    <div class="list-block">
      <ul>
        <!-- Iterate through backend languages -->
        {{#each this.backend}}
        <li>
<!-- As a context name for this link we pass context path from template7Data root -->
<a href="language-details.html" class="item-link item-content" data-context-name="languages.backend.{{@index}}">
    <div class="item-inner">
      <div class="item-title">{{this.name}}</div>
    </div>
</a>
        </li>
        {{/each}}
      </ul>
    </div>
  </div>
</div>

language-details.html:

<div class="page" data-page="language-details">
  <div class="page-content">
    <div class="content-block-title">{{name}}</div>
    <div class="content-block">
      <p>{{description}}</p>
    </div>
  </div>
</div>

在链接上使用 data-context-name 属性可以传入 templatesData 中定义的上下文。他也支持通过上下文路径(通过使用 . 号)来访问子属性.

比如，我们可以创建一个使用上下文路径的链接指向详情页：

<a href="language-details.html" data-context-name="languages.frontend.1">CSS</a>

在JS中，我们也可以使用视图的路由器的 .load() 方法和 contextName 属性：

mainView.router.load({
    url: 'language-details.html',
    contextName: 'languages.frontend.0'
})

传入自定义的上下文

Framework7 可以让我们在任何Ajax或者动态页面中传入自定义的上下文。

我们可以通过链接上的 data-context 属性来给任何页面传递上下文，这个属性值是一个合法的序列化的JSON字符串：

<a href='contacts.html' data-context='{"tel": "(999)-111-22-33", "email": "contact@john.doe"}'>Contacts</a>

或者，在JS中，我们可以使用视图的路由器的 .load() 方法传入一个 context 属性：

mainView.router.load({
    url: 'contacts.html',
    context: {
      tel: '(999)-111-22-33',
      email: 'contact@john.doe'
    }
})

或者，我们可以指定一个 templatesData 中的普通数据:

mainView.router.load({
    url: 'language-details.html',
    context: Template7.data.languages.frontend[1] // CSS
})

直接加载模板

如果你使用自动编译模板，你可以直接把他们当做动态页面渲染和加载

我们看看另一个模板，在index文件中已经定义了下面这些页面的模板：

<script id="contactsTemplate" type="text/template7">
  <div class="page" data-page="contacts">
    <div class="page-content">
        <p>You can contact me:</p>
        <p>By phone: {{tel}}</p>
        <p>By email: {{email}}</p>
    </div>
  </div>
</script>
 
<script id="aboutTemplate" type="text/template7">
  <div class="page" data-page="about">
    <div class="page-content">
        <p>Hell, my name is {{name}}. I am {{age}} years old:</p>
    </div>
  </div>
</script>

在我们的JS中:

var myApp = new Framework7({
    precompileTemplates: true, //
    template7Pages: true, //enable Template7 rendering for pages
    template7Data: {
        // Data for contacts page
        'page:contacts': {
    tel: '(999)-111-22-33',
    email: 'contact@john.doe'
        }
    }
})

现在，我们需要加载这些页面。

对于 "contacts" 页面，我们在 templatesData 中已经有需要的数据。所以我们使用 data-template 属性指定模板id就行了：

<!-- We need to specify template id in data-template attribute -->
<a href="#" data-template="contactsTemplate">Contacts</a>

对于about页面，我们没有指定任何数据，所以我们可以传入自定义的上下文：

<a href="#" data-template="aboutTemplate" data-context='{"name": "John Doe", "age": "35"}'>About Me</a>

当然，我们也可以通过JS来做，直接使用视图的 .load() 方法并传入一个 template 属性：

//To load contacts page from template:
mainView.router.load({
    template: Template7.templates.contactsTemplate // template already compiled and available as a property of Template7.templates
})
 
//To load about page from template with custom data:
mainView.router.load({
    template: Template7.templates.aboutTemplate, // template already compiled and available as a property of Template7.templates
    context: {
        name: 'John Doe',
        age: 35
    }
})

URL 参数

当我们用 template7 渲染Ajax 页面的时候，他的上下文总是会被拓展到一个包含了URL GET参数的 url_query 属性上去：

<a href="person.html?firstname=John&lastname=Doe&age=33">John Doe</a>
<a href="person.html?firstname=Mike&lastname=Doe&age=26">Mike Doe</a>

person.html

<div class="page" data-page="person">
    <div class="page-content">
        <p>Hello, my name is {{url_query.firstname}} {{url_query.lastname}}. I am {{url_query.age}} years old.</p>
    </div>
</div>