Adonis JS sử dụng Edge view engine.
Edge supports:
- Layouts & partials
- Components
- Runtime debugging using chrome dev tools
- Logical tags and everything in between
## Cơ bản
1. Thiết lập để sử dụng Edge
File start/app.js
const providers = [
'@adonisjs/framework/providers/ViewProvider'
]
Chú ý là tất cả các views của bạn sẽ lưu ở folder resources/views, với .edge extensions.
2. Tạo mới 1 view
> adonis make:view welcome
==> resources/views/welcome.edge
3. render một trang tĩnh
Route.get('welcome', ({ view }) => {
return view.render('welcome')
})
4. sub folder
File path: resources/views/my/nested/view.edge
> view.render('my.nested.view')
## Request information
Tất cả views đều có thể truy cập đến Request object
> The request URL is {{ request.url() }}
Chú ý là `{{ request.url() }}` cũng có thế thay thế bằng `{{ url }}`
## Các hàm Globals
1. style
> {{ style('style') }}
==> Render: <link rel="stylesheet" href="/style.css" />
> {{ style('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css') }}
==> Render:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
2. script
> {{ script('app') }}
==> <script type="text/javascript" src="/app.js"></script>
> {{ script('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js') }}
==>
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
3. assetsUrl
Trả về đường dẫn có thư mục gốc là thư mục public
> <img src="{{ assetsUrl('images/logo.png') }}" />
==> Render: <img src="/images/logo.png" />
==> File vật lý: public/images/logo.png
4. route
Ví dụ route: Route.get('users/:id', 'UserController.show') .as('profile')
> <a href="{{ route('profile', { id: 1 }) }}"> View profile </a>
> <a href="{{ route('UserController.show', { id: 1 }) }}"> View profile </a>
5. url
Lấy ra request url hiện đang xử lý
> The request URL is {{ url }}
6. auth
Nếu bạn đang sử dụng Auth Provider thì có thể lấy thông tin user thông qua function auth
> {{ auth.user }}
7. CSRF
Nếu bạn đang sử dụng Shield Middleware thì có thể sử dụng function này
> {{ csrfToken }}
==> Output token value
> {{ csrfField() }}
==> <input type="hidden" name="_csrf" value="...">
Nếu đang sử dụng Shield Middleware thì CSP headers sẽ được thêm tự động.
Tuy nhiên bạn cũng có thể tự thêm vào thông qua cspMeta global
<head> {{ cspMeta() }} </head>
## Tags
Ví dụ @if, @each, @include ...
Đọc thêm: http://edge.adonisjs.com/docs/tags
Một số tags đặc biệt:
1. loggedIn
<!-->
@loggedIn
You are logged in!
@else
<a href="/login">Click here</a> to login.
@endloggedIn
-->
2. Render file svg từ thư mục public với `inlineSvg`
> <a href="/login"> @inlineSvg('lock') Login </a>
## Mở rộng Views
Viết các function xử lý mở rộng cho view và đăng kí ở providers hay Ignitor hooks.
1. Tạo các hàm Globals
const View = use('View')
View.global('currentTime', function () {
return new Date().getTime()
})
==> Sử dụng trong views: `{{ currentTime() }}`
2. Sử dụng this để tương tác với các đối tượng global
<!-->
View.global('subMitbutton', function (text) {
return this.safe(`<button type="submit">${text}</button>`)
})
-->
Chú ý ở đây sử dụng hàm safe để trả về HTML không bị mã hóa.
b) Sử dụng this.resolve để lấy kết quả trả về từ các global functions khác
<!-->
View.global('messages', {
success: 'This is a success message',
warning: 'This is a warning message'
})
View.global('getMessage', function (type) {
const message = this.resolve('messages') // lấy object messages từ global messages
return messages[type]
})
-->
==> Gọi ở view: `{{ getMessage('success') }}`
3. Viết thêm các Tags
<!-->
const View = use('View')
class MyTag extends View.engine.BaseTag {
//
}
View.engine.tag(new MyTag())
-->
4. Thêm các global value dựa theo các request đặc biệt
Tạo các middleware để bắt các request đặc biệt và cập nhật global value vào views
<!-->
class SomeMiddleware {
async handle ({ view }, next) {
view.share({
apiVersion: request.input('version')
})
await next()
}
}
-->
==> Sử dụng ở view: `{{ apiVersion }}`
Không có nhận xét nào:
Đăng nhận xét