Ở bài viết trước, mình đã giới thiệu sơ lược về cách cài đặt, và viết một hello-world component với PolymerJS, hôm nay mình xin phép được tiếp tục chủ đề với hướng dẫn custom properties cho component trong PolymerJS.

Xem thêm:

Custom Properties trong Component

Tiếp tục sử dụng demo helloworld trước, cúng ta đã có cấu trúc code như sau:

HTML:

JS:

Theo như đoạn code trên, ở một số trường hợp chúng ta cần truyền tham số vào component, để có thể sử dụng theo ý muốn, để một component làm việc được chúng ta sẽ khai báo properties trong component của mình.

Ví dụ:

Chúng ta viết một component cho phép hiển thị thông tin một cuốn sách như: Tên sách, tác giả, giá bán,.. hoặc đơn giản hơn, với ví dụ helloworld, tôi muốn truyền vào tên người nào đó. Ta sẽ có đoạn HTML sau:

Như trên chúng ta đã truyền vào tham số first-namelast-name cho component hello-world, thử mở trang này bằng trình duyệt xem có gì thay đổi nhé, để chạy thử code, tốt nhất chúng ta sử dụng một server ảo, không nên mở trực tiếp các file html, ở bài trước tôi có nhắc đến cách mở server bằng polyserve, nếu chưa biết các bạn có thể xem lại nhé.

Và đây là kết quả hiện lên màn hình:

demo-properties-polymer

Như trên thì chúng ta có thể thấy, không có lỗi gì xuất hiện, tuy nhiên tham số chúng ta truyền vào chưa có hoạt động, vậy để component này có thể hiểu được tham số chúng ta truyền chúng ta sẽ khai báo, và sử dụng nó trong component, các bạn vào sử file hello-world.html như sau:

  • Ở trên tôi đã thêm một attribute “properties” vào Object Polymer của file hello-world.html
  • Và tôi đã thay đổi nội dung trong phần <template>
  • Tôi sử dụng [[]] nghĩa là oneway binding và chứa trong nó là tên biến, chúng ta có hai loại cặp là [[]] và {{}}, tôi sẽ trình bày nó ở phần Data Binding.

Kết quả màn hình của chúng ta có được như sau:

demo-properties-polymer-2

Kết quả là phần FirstName đã được hiển thị, nhưng phần LastName thì không, ở chổ này chúng ta xem lại code trong phần template, tôi đã code định dạng như sau, và có lỗi xảy ra và chúng ta không thế nối text với một biến mà không được bao bởi một thẻ nào, các bạn có thể tìm hiểu thêm tại đây. Như vậy chúng ta chỉ sử dụng biến bao bởi một thẻ.

Sau khi sửa xong thì kết quả đã hiện nội dung lên trình duyệt.

demo-properties-polymer-3

Định nghĩa Default value trong properties

Như những component khác, không phải lúc nào chúng ta cũng khai báo đầy đủ các properties values, và để tránh trường hợp lỗi, hoặc tính toán sai, chúng ta sẽ định nghĩa default value cho các properties.

Khi chưa có default value, và tôi không khai báo attributes khi dùng component

none-defaults

Chúng ta sửa lại khai báo properties như sau:

Ở đây tôi có type là String, và value là nội dung tôi khai báo mặc định, khi đó nếu như chúng ta không khai báo khi sử dụng component, thì giá trị default sẽ được sử dụng. Kết quả sau khi khai báo Default value:

defind-default-value-polymer

Tính toán trong properties

Như ví dụ trên, nếu tôi muốn hiển thị FullName (bao gồm FirstName + LastName), chúng ta sẽ nối hai giá trị truyền vào lại với nhau, chúng ta có cách như sau:

Chúng ta nối trực tiếp hai attributes lại với nhau, như đã nói ở trên, chúng ta không thể dùng kiểu [[firstName]][[lastName]] mà mỗi attribute phải được bao bởi một thẻ (tag), như vậy tôi sửa trong  <template> như sau:

Kết quả:

demo-computed-properties

Nhưng đối với nhiều xử lý phức tạp khác, chúng ta không thể code trực tiếp nối như vậy, thì trong Polymer hỗ trợ virtual values và các thành phần khác giúp thao tác với properties, ở đây tôi sẻ khai báo một virtual value và khai báo một function: computedFullname(),  để tính toán trả về giá trị cho virtual value, chúng ta sửa lại file hello-world.html

Tôi đã khai báo một virtual value là fullName có type là String, và computed là hàm computedFullname, trong đó tôi sẽ thực hiện nối chuỗi và trả về kết quả là một String.

Và kết quả hiện lên trình duyệt như sau:

demo-computed-properties-2

Kết luận

Như vậy ở bài viết này tôi đã giới thiệu một số thao tác cơ bản để sử dụng Custom properties trong component:

  • Định nghĩa và sử dụng values properties
  • Khai báo values default
  • Xử lý và sử dụng virtual values để tính một giá trị.

Để tìm hiểu thêm về properties, mời các bạn tham khảo trang chính thức của Polymer: https://www.polymer-project.org/1.0/docs/devguide/properties.html

Nguồn tham khảo:

  • PART IV – Testing, Building, and Deploying Components with Polymer – Ebook: Developing Web Components: UI from jQuery to Polymer
  • https://www.polymer-project.org/1.0/
  • www.code-labs.io/polymer-summit
  • https://www.youtube.com/playlist?list=PLLnpHn493BHGhoGAb2PRKzv4Zw3QoatK-
Polymer JS – Cách dùng custom properties cho component trong Polymer
5 (100%) 1 vote

1 BÌNH LUẬN

BÌNH LUẬN

Nhập mã kiểm tra * Time limit is exhausted. Please reload the CAPTCHA.