TIL - Build Front End với AMP BIND
TIL
723
Google AMP
5
front-end
7
White

Hùng Phạm viết ngày 12/06/2019

Hôm nay mình mới học thêm được tí xíu về AMP đó là AMP-BIND, tiện đây mình sẽ note lại vài điểm chính mà mình đã học được trong quá trình làm việc.

Bài viết như một nhật ký lưu lại một số kiến thức mà mình biết qua mỗi ngày nên sẽ không có sự đầu tư về nội dung, hy vọng các anh em thông cảm.

AMP BIND:

AMP-BIND hiểu nôm na như là một component của AMP giúp các anh em có thêm công cụ tuỳ chỉnh các trạng thái trên AMP Pages bằng việc ràng buộc dữ liệu.

AMP-BIND bao gồm ba component chính như sau:

  • State: hay còn là trạng thái, dữ liệu đầu vào một vào JSON.
  • Expressions: biểu thức giống như Javascript dùng để tham chiếu cập nhật trạng thái cho state.
  • Bindings: dùng để ràng buộc kiểu trả về thông qua biểu thức.

EXAMPLE:

<!-- Store JSON data for amp-state -->
<amp-state id="myState">
  <script type="application/json">
   {
     "dog": {
       "imageUrl": "/dog.jpg"
     },
     "cat": {
       "imageUrl": "/cat.jpg"
     }
   </script>
</amp-state>

<amp-img width ="300" height ="200" src="/dog"
    [src]="myState[currentAnimal].imageUrl">
</amp-img>
<button on="tap:AMP.setState({currentAnimal: 'cat'})">Set to Cat</button>

 

Ví dụ trên như sau:

Đầu tiên mình cần phải khai báo một dữ việc đầu vào là một array có hai phần tử dog và cat. Ở <button> mình sẽ dùng biểu thức để set State mặc định cho nó là cat với đường dẫn là ImageUrl.

Sau đó mình sẽ ràng buộc kiểu dữ liệu ở <amp-img> bằng dữ liệu đầu ra là một đường dẫn [src]

Link bài viết gốc mình ở đây
https://hungphamdevweb.com/til-build-front-end-voi-amp-bind.html

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

13 bài viết.
12 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
7 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết 6 tháng trước
7 2
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 6 tháng trước
4 2
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 5 tháng trước
4 0
Bài viết liên quan
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 6 tháng trước
4 2
White
0 0
worker và prefork, vốn là 2 MultiProcessing Modules (MPMs) phổ biến trên Linux. Ngoài ra hiện nay còn có event (cũng Linux), mpm_winnt (cho Windows...
ajino2k viết 1 ngày trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
13 bài viết.
12 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!