Dart Polymer: Removing element from List


I have a custom element with some models. Here is the code for custom element.


<polymer-element name="message-element" attributes="message">

    <table class="table">
    <tr template repeat="{{attrib in attribs}}">
      <td><paper-input name="message-attrib-name" label="New Attribute" value="{{attrib.name}}"></paper-input></td>
        <paper-input name="message-attrib-value" label="" value="{{attrib.value}}"></paper-input>

        <core-icon-button icon="check" on-tap="{{addAttribute}}"></core-icon-button>
        <core-icon-button icon="highlight-remove" on-tap="{{deleteAttribute}}"></core-icon-button>


  <script type="application/dart" src="message-element.dart"></script>


class MessageElement extends PolymerElement with Observable {
  @published Message message;
  @observable List<Attribute> attribs = toObservable([]);
  @observable Attribute att;

  /// Constructor used to create instance of MainApp.
  MessageElement.created() : super.created() {

  attached() {
    att = new Attribute('', '');
    message.attributes = attribs; // initialize with 1 attrib

  void addAttribute(Event event, Object detail, Node sender) {
    att = new Attribute('', '');

  void deleteAttribute(Event event, Object detail, Node sender) {
    // remove the clicked attrib

attribs is shown in a modal dialog and each attrib in attribs has couple inputs with add and delete buttons. Adding element is working fine. How do I delete the clicked attrib from attribs. I’m calling void deleteAttribute(Event event, Object detail, Node sender) on on-tap on delete button. In this call I need to delete the attrib from the list but how do I get the details of tapped attrib so I can delete that from the list.


Polymer >= 1.0.0

void someClickHandler(dom.Event event, [_]) {
  // for native events (like on-click)
  var model = new DomRepeatModel.fromEvent(event);
  // or for custom events (like on-tap, works also for native events)
  var model = new DomRepeatModel.fromEvent(convertToJs(event));
  var value = model.jsElement['items']; 
  // or 
  var value = model.jsElement[$['mylist'].attributes['as']];
  // if you used the `as="somename"` 
  // in your <core-list> or <template is="dom-repeat">

There is an open issue related to custom events: https://github.com/dart-lang/polymer-dart/issues/624

Polymer <= 0.16.0

import 'package:template_binding/template_binding.dart' as tb;

void deleteAttribute(Event event, Object detail, Node sender) {
  tb.TemplateInstance ti = tb.nodeBind(event.target).templateInstance; 
  var value = ti.model.value as Attribute;

See In Polymer.js children of a template have a reference to the template, how can this be done in Polymer.dart for more details.

Answered By – Günter Zöchbauer

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *