3

I have got a polymer-element with following html:

<polymer-element name="tab-bar">
  <template>
    <button>Hello</button>
    <template repeat="{{item in items}}">
      <div>This element is {{ item }}</div>
    </template>
  </template>
  <script type="application/dart" src="tab_bar.dart"></script>
</polymer-element>

The underlying dart class looks as follows:

import 'package:polymer/polymer.dart';

@CustomTag('tab-bar')
class TabBar extends PolymerElement {
  List items;

  TabBar(List<String> items) {
    this.items = toObservable(items);
  }
}

With the following approach, it isn't possible to programmatically add the element:

query('body').children.add(createElement(new TabBar(['One','Two','Three'])));

So now, how can I add such a polymer element programatically and also set the list in the constructor?

Cœur
  • 37,241
  • 25
  • 195
  • 267
Adracus
  • 891
  • 1
  • 7
  • 19

2 Answers2

10

As of polymer 0.8.5 you can use constructor like

new Element.tag('tag-bar');

also, no more .xtag and no more .host (host == this now)

credits go to Seth Ladd who explained this on polymer mailing list

Community
  • 1
  • 1
tomaszkubacki
  • 3,181
  • 3
  • 23
  • 36
  • 1
    I've tried using this code and it only adds the `` element to the DOM, but it does not actually render de HTML inside the template tag of the polymer element, any clues on why this is happening? – Tristian Jan 14 '14 at 11:22
  • Triztian I have the same problem. – Phil Jan 29 '14 at 15:46
  • Ahh I had to import my component first, I forgot. in my main html I had to – Phil Jan 30 '14 at 02:58
3

Note: this only works for polymer.dart < 0.8.5. See other answer for the new way.

Custom elements don't really have constructors like we're familiar with them in Dart. Instead, try this:

var tabBar = createElement('tag-bar');
tabBar.xtag.items = toObservable(['a','b','c']);

query('body').children.add(tabBar);
Seth Ladd
  • 112,095
  • 66
  • 196
  • 279