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

Two-way data binding


Now, we'll take a look at two-way data binding, which usually goes hand-in-hand with forms.

In one-way data binding, we embedded the instance's property into the HTML template. The direction went only from the instance to the HTML.

But with form input fields, we can propagate its values from the HTML input to instance properties and back to HTML. In other words, you can change the instance's property by changing the input value, but you can also change the input value by changing the instance's property. This is why it's called two-way binding.

Better still, let's create an example. We'll create a page that includes the <my-form> custom element:

<!-- web/index.html -->
<html>
  <head>
    <script async src="packages/browser/dart.js"></script>
    <link rel="import" href="my-form.html">
  </head>
  <body>
    <my-form></my-form>
    <script type="application/dart" src="main.dart"></script>
  &lt...