Data Binding

DataBinding là sự gắn kết hay ràng buộc về dữ liệu, nó liên kết đến  một property hoặc sub-property của các custom element (host element) đến property hoặc attribute của các local DOM (the child or target element).

Một binding được tạo ra bằng cách sử dụng các “binding annotation” trong các local DOM template, đây là mẫu template:

Các Binding annotations:

Polymer sử dụng 2 loại binding annotation bao gồm các property name or subproperty name là 2 cặp dấu ngoặc nhọn {{}} hoặc cặp dấu ngoặc vuông [[]]:

  • Cặp dấu ngoặc vuông [[]] dùng cho one-way bindings. Dữ liệu sẽ được đi một chiều host-to-child, và các dữ liệu sẽ không thay đổi giá trị của host property. Nói cách khác OneWay là dữ liệu thay đổi thì giá trị hiển thị giao diện người dùng thay đổi.
  • Cặp dấu ngoặc nhọn {{}}) tạo ra các bindings tư động, bao gồm one-way binding hay two-way bindings. Dữ liệu sẽ được đi theo một chiều hoặc hai chiều, hay nói cách khác TwoWay là khi dữ liệu thay đổi thì giao diện người dùng thay đổi và ngược lại.

Ví dụ Data Binding với PolymerJS

Chúng ta sẽ đi đến ví dụ cụ thể, sử dụng lại ví dụ viết chương trình Hello World thần thánh:

Ở bài trước, chúng ta có sử dụng cặp dấu [[]] trong khai báo properties

Với việc sử dụng [[]] chúng ta đã tạo ra một one-way binding, khi đó chúng ta có thể truyền và thay đổi giá trị dữ liệu (Datasource) thì giá trị hiển thị trên giao diện sẽ thay đổi, nhưng không có chiều dữ liệu ngược lại nghĩa là nếu chúng ta thay đổi giá trị trên giao diện, thì giá trị của datasource không thay đổi.

data-binding

  • Để ví dụ rõ hơn, tôi sẽ thêm vào một input để có thể thay đổi giá trị ngoài giao diện.

Thử chạy trên trình duyệt và kết quả như sau, Khi thêm giá trị vào input 1 (đang sử dụng {{}} để tạo một two-way binding)

oneway-binding-polymerjs

  • Tiếp theo tôi thay đổi cấu trúc input sử dụng [[]] để tạo một one-way binding

Khi thay đổi giá trị vào input 1  (đang sử dụng [[]] để tạo một one-way binding)

oneway-binding-polymerjs-oneway

 

  • Chúng ta có thể thấy, với Two-Way binding, khi thay đổi giá trị từ giao diện, thì nó sẽ thay đổi giá trị của datasource, nhưng với One-way binding thì chỉ khi datasource thay đổi, thì giá trị ngoài giao diện mới thay đổi.

Kết luận:

PolymerJS hổ trợ 2 phương thức khởi tạo data binding là One-Way Binding [[]], và Two-Way Binding {{}}:

  • Cặp dấu ngoặc vuông [[]] dùng cho one-way bindings. Dữ liệu sẽ được đi một chiều host-to-child, và các dữ liệu sẽ không thay đổi giá trị của host property, OneWay là dữ liệu thay đổi thì giá trị hiển thị giao diện người dùng thay đổi.
  • Cặp dấu ngoặc nhọn {{}}) tạo ra các bindings tư động, bao gồm one-way binding hay two-way bindings. Dữ liệu sẽ được đi theo một chiều hoặc hai chiều, TwoWay là khi dữ liệu thay đổi thì giao diện người dùng thay đổi và ngược lại.

Nguồn tham khảo:

  • https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#
  • https://courses.platzi.com/blog/data-binding-polymer/
  • http://futurice.com/blog/declarative-apps-with-polymers-two-way-data-binding
Polymer JS – Data binding trong Polymer
5 (100%) 1 vote

0 BÌNH LUẬN

BÌNH LUẬN

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