fbpx
Search
Generic filters
Exact matches only
Filter by Custom Post Type

Try these: dockerwebpackwordpressatomic csshackerrankmalaysia

Xây Dựng Front End với AMP BIND

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]

Xin chào các đồng chí tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web Tôi là một Front-end Developer, kiêm writer, quay phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa

Leave a reply:

Your email address will not be published.

Site Footer