Dart Polymer：从列表中删除元素

Question

我有一些模型的自定义元素。这是自定义元素的代码。

留言-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>

留言-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 显示在模态对话框中，attribs 中的每个属性都有一对带有添加和删除按钮的输入。添加元素工作正常。如何从属性中删除单击的属性。我在点击删除按钮时调用 void deleteAttribute(Event event, Object detail, Node sender) 。在此调用中，我需要从列表中删除属性，但如何获取点击属性的详细信息，以便从列表中删除它。

Answer 1

聚合物 >= 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">
}

有一个与自定义事件相关的未决问题：https://github.com/dart-lang/polymer-dart/issues/624

聚合物 <= 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);
}

有关详细信息，请参阅 In Polymer.js children of a template have a reference to the template, how can this be done in Polymer.dart。

Dart Polymer：从列表中删除元素

Dart Polymer: Removing element from List

data-binding

dart

polymer

dart-polymer