Unsupported operation: can't eval an 'in' expression

Question

I'm trying to make an image viewer that displays image tags, and I was going to use a repeat template to output the tags. Unfortunately I get this error when

Breaking on exception: Unsupported operation: can't eval an 'in' expression

By moving up the stack trace I was able to determine that the expression being evaluated is "tag_string in tagList", which comes from this custom element:

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="dartlery-viewer">
  <template>
    <style>
      :host {
        position:absolute;
        left:210px;
        top:0px;
        border: solid 0px black;
        right:0;
        text-align:center;

      }
      div#viewer {
        display:none;
      }
    </style>
    <div id="viewer">
      <img src="{{imageSource}}" />
      <textarea>
            <template repeat="{{tag_string in tagList}}">
            tag
      </template>
      </textarea>
    </div>
  </template>
  <script type="application/dart" src="dartlery_viewer.dart"></script>
</polymer-element>

This is the class for it:

import 'dart:html';
import 'dart:convert';
import 'package:polymer/polymer.dart';
import 'package:dartlery_client/dartlery.dart';

@CustomTag('dartlery-viewer')
class DartleryViewerElement extends PolymerElement {

  @observable String id = "-1";
  @observable String imageSource = "-1";

  final List tagList = new ObservableList();

  Element get _ele {
    return $["viewer"];
  }

  DartleryViewerElement.created() : super.created()  {


  }

  void displayFile(String id) {
    HttpRequest.getString("${SERVER_ADDRESS}files/${id}").then((response) {
      Map data = JSON.decode(response);
      if(data["files"]!=null) {
        for(Map file in data["files"]) {
          _showImageData(file);
        }
      }
    });
    this.show();
    this.id = id;
  }

  void _showImageData(Map data) {
    this.tagList.clear();
    this.tagList.addAll(data["tags"]);

    this.imageSource = data["src"];
  }

  void hide() {
    this._ele.style.display = "none";
  }

  void show() {
    this._ele.style.display = "block";
  }


}

Am I missing something stupid?

Answer 1

The content of <textarea> is treated like character data. The template tag has no meaning inside <textarea>. An expression containing in is only valid for a <template repeat='{{x in y}}'> and therefore this can't be evaluated.

Why don't you make tagList a String and assign something like data['tags'].join(',') and <textarea value='{{tagList}}'></textarea>?