Dart Polymer: Removing element from List

Issue

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

message-element.html

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

    <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>
      <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>
      </td>
    </tr>
    </table>

  </template>

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

message-element.dart

@CustomTag('message-element')
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() {
    polymerCreated();
  }

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

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

  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.

Solution

Polymer >= 1.0.0

@reflectable
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;
  attribs.remove(value);
}

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)