One-way data binding
Creating new elements is easy, but without any logic behind them, it isn't very practical. We've already said that polymer.dart utilizes the Observe
library, which we can use to listen to changes of attributes on element instances and also to create one-way data bindings, which we'll use now.
Our new custom element will be called <one-way-book>
, and we'll reuse the 3D books that we created in Chapter 4, Developing a Mobile App with Dart. Just to present polymer's capabilities, we'll add two control buttons that will rotate each book, and a caption of the book floating above them with the name of its current cover image.
The body for this example will look very familiar. We'll just add two elements with two custom attributes that we'll use later in Dart code:
<!-- web/index.html --> <body> <one-way-book cover-image="./dune-cover-new.jpg" base-color="#da944c"></one-way-book> <one-way-book cover-image="./dune-cover-old.jpg" ...