Binding to a map

In this recipe, we show you how the data of a map can be displayed in a Polymer component. You can find the code in the project databinding_map.

How to do it...

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

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

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

2. We define a map companies, which we want to display in the file pol_map.dart:

   import'dart:html';
   import'package:polymer/polymer.dart';
   
   @CustomTag('pol-map')
   classPolmap extends PolymerElement {
   Map companies = toObservable({1: 'Google', 2: 'Microsoft'});
   Polmap.created() : super.created() {
     companies[3] = 'HP';
   }
   
   addcompanies(Event e, var detail, Node target) {
     companies[4] = 'Facebook...