Book Image

DART Cookbook

By : Ivo Balbaert
Book Image

DART Cookbook

By: Ivo Balbaert

Overview of this book

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

Binding to a selected field


In this recipe, we will show you how to bind a selected value from a <select> tag to a variable; so in effect, we now perform data binding from the UI to the code and have two-way data binding. We show a list of companies. You can find the code in the project pol_select.

How to do it...

  1. The script starts with web\index.html, where a component with the name pol-select is imported through the following line:

    <link rel="import"href="pol_select.html">

    From this, we know that the component is defined in pol_select.html, and the code behind it is in a file named pol_select.dart. For a discussion of the other tags, see the first recipe.

  2. The code for pol-select is defined in pol_select.dart:

    import'package:polymer/polymer.dart';
    
    @CustomTag('pol-select')
    classPolselect extends PolymerElement {
      final List companies = toObservable(['Google', 'Apple',   'Mozilla', 'Facebook']);
      @observable int selected = 2; // Make sure this is not null;   // set it to the default...