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中的每个attribs都有一些带有add和delete按钮的输入。添加元素工作正常。如何从attribs中删除点击的attrib。我在点击删除按钮上调用void deleteAttribute（事件事件，对象详细信息，节点发送者）。在这个调用中，我需要从列表中删除attrib，但是如何获取tapped attrib的详细信息，以便我可以从列表中删除它。

Answer 1

聚合物＆gt; = 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

聚合物＆lt; = 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：从List中删除元素

1 个答案: