Book Image

DART Essentials

Book Image

DART Essentials

Overview of this book

Table of Contents (16 chapters)
Dart Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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"
 ...