Dart Polymer: Removing element from List

Question

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.

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

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.

edited May 23 '17 at 11:58

Community

1
1

answered May 06 '15 at 14:13

Günter Zöchbauer

490,478
163
1,733
1,404

This is giving me following warning on var value = ti.model.value as Inner 'The name 'Inner' is not a type and cannot be used in an 'as' expression' – Jawaid May 06 '15 at 15:45
OK great its working fine now. But I don't understand it. Can you give me some pointers to get insight into it. I'm still learning Dart and Polymer I would really appreciate if you could give me links to learn quick and in depth. Thanks for your help. – Jawaid May 06 '15 at 15:56
Sorry I don't have links, such "advanced" things aren't documented well yet. What Polymer does, is to assign an Expando (http://stackoverflow.com/questions/13358018) to each node it creates, holding a reference to the model instance (Attribute in your case) dynamically and with the code in my answer you acquire that referenced model instance from the node passed with the event. – Günter Zöchbauer May 06 '15 at 16:02
I'm following a lot of discussions, and GitHub repo updates (issues, pull requests) where I sometimes find some interesting pieces. Also the [polymer] tag on StackOverflow for Polymer.js. Almost anything working in Polymer.js can somehow be translated to Dart. I'm sure documentation will become better when Polymer is stable (1.0) – Günter Zöchbauer May 06 '15 at 16:07

Dart Polymer: Removing element from List

1 Answers1