Framework7 - Trang mẫu7
Sự miêu tả
Template7 là công cụ tạo mẫu JavaScript ưu tiên cho thiết bị di động với cú pháp giống như handlebars.js . Đây là công cụ mẫu mặc định siêu nhẹ và cực nhanh trong Framework7.
Đầu tiên, chúng ta cần chuyển tham số sau vào quá trình khởi tạo ứng dụng để hiển thị tất cả các trang Ajax và động dưới dạng mẫu Template7:
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S. không | Cách sử dụng & mô tả 7 trang mẫu |
|---|---|
| 1 | Dữ liệu Mẫu / Trang Bạn có thể chuyển dữ liệu / ngữ cảnh bắt buộc cho các trang cụ thể bằng cách chỉ định tất cả dữ liệu trang trong tham số template7Data , được gửi khi khởi chạy Ứng dụng. |
| 2 | Vượt qua ngữ cảnh tùy chỉnh Framework7 cho phép bạn chuyển ngữ cảnh tùy chỉnh đến bất kỳ trang động nào hoặc bất kỳ Ajax nào được tải. |
| 3 | Tải mẫu trực tiếp Bạn có thể kết xuất và tải các mẫu ngay lập tức dưới dạng các trang động. |
| 4 | Truy vấn URL Nếu bạn đang sử dụng Template7 để hiển thị các trang Ajax, ngữ cảnh của nó sẽ luôn được mở rộng với thuộc tính đặc biệt url_query . |
Thí dụ
Ví dụ sau cung cấp các liên kết, hiển thị thông tin người dùng như chi tiết người dùng, lượt thích của người dùng, v.v. khi bạn nhấp vào các liên kết đó.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>my-app.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});likes.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng index.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/index.html và kết quả được hiển thị như hình dưới đây.
Ví dụ cung cấp các liên kết, hiển thị thông tin người dùng như chi tiết người dùng, lượt thích của người dùng khi bạn nhấp vào các liên kết đó.