Gero
Gero

Reputation: 13563

How to access map values / iterate over map in Polymer.dart 0.5

I am working on my first polymer application and I am stuck. How do I access map values with polymer? I have a class with a map within. I can iterate over lists in my template, but how to get all values from a map?

 query('#tmpl-question').model = q;
 query('#tmpl-answers').model = q.map_answers;


@observable
class Question extends PolymerElement with ObservableMixin{

  @observable
  Map<String,String> map_answers = toObservable({}); //new Map<String,String>();

  void initQuestion(){

    map_answers["false1"]="1";
    map_answers["true"]="42";
    map_answers["false2"]="2";}}

        <template id="tmpl-answers" repeat>
        <p>
           <label for"a1" value="asdf"> HOW TO DISPLAY ALL MAP VALUES  //iterate over list elements with {{}}
        </p>
       </template>

EDIT: the problem was with the assignment of the object q to the model.

does not work:

Question q = new Question();
   query('#tmpl-question').model = q;

if you import 'package:polymer_expressions/polymer_expressions.dart'; this will work:

  TemplateElement template = query('#tmpl-question');
  template.bindingDelegate = new PolymerExpressions(globals: {
    'uppercase': (String input) => input.toUpperCase()
  });
  template.model = q;

.

 <template repeat="{{j in map2.keys}}">
        <li>{{map2[j]}}</li>
      </template>

Upvotes: 2

Views: 3761

Answers (1)

Justin Fagnani
Justin Fagnani

Reputation: 11201

Maps have two iterable properties: keys and values. I think what you want to do is iterate over the keys and then access the values.

Something like:

<polymer-element ... >
  <template>
    <template repeat="{{ key in map_answers.keys }}">
      <p>
        <label>{{ map_answers[key] }}</label>
      </p>
    </template>
  </template>
</polymer-element>

Upvotes: 9

Related Questions