dart - 如何在 Dart 端捕获 dom-repeat 模板(或 iron-list)的项目 model.index？

Question

在以下示例中:

捕获索引.html

<template id="lista_produtos" is="dom-repeat" items="{{produtos}}" as="item">
   ...
   <paper-input label="Custo" value="{{item.aquisicao_custo}}"type="number" on-change="calcularPrecoSugeridoEvento"><div prefix>R$</div></paper-input>
   ...
</template>

captureIndex.dart

@property
List produtos = [
  {
    "produto": "Prego",
    "unidade": "Unitário",
    "margem_contribuicao": 10.0,
    "preco_sugerido": 5.0,
  },
  {
    "produto": "Madeira",
    "unidade": "Unitário",
    "margem_contribuicao": 10.0,
    "preco_sugerido": 5.0,
  }
];

@reflectable
void calcularPrecoSugeridoEvento(Event e, d) {
  DomRepeatModel model = new DomRepeatModel.fromEvent(e);

  // IT´S WORKS. DATA ARE SHOWN!!!!
  Map m = model.item; 
  window.alert(m.toString());

  // IT IS NOT WORKS. INDEX IS NOT SHOWN!!!!
  int i = model.index;
  window.alert(i.toString());
}

我想捕获model.index。但它是空的。

我不想在事件中使用 html 标签，通常建议:

...
<template id="lista_produtos" is="dom-repeat" items="{{produtos}}" as="item">
   <paper-input id={{index}} on-change="eventX></paper-input>
</template>
...

...
void event (e, d) {
   window.alert((e).attributes['id']));
}
...

是否有某种形式可以通过模型捕获索引？

Answer 1

id={{index}}是个坏主意。

你不应该绑定(bind)到 id属性。

id属性不能以数字开头。 id="123"无效 id="a123"或 id="_123"可以，但你仍然不应该绑定(bind)到 id属性。

如果您不想使用 HTML 属性，可以使用

@reflectable
  calcularPrecoSugeridoEvento(dom.Event event, [_]) {
  ($['lista_produtos'] as DomRepeat)
      .modelForElement(event.target).jsElement['index'];
}

如果您确实想使用 HTML 属性，则需要在属性名称中添加“$”以实际绑定(bind)到属性(反射(reflect)在 DOM 中)而不是属性(仅限 JS):

<paper-input data-index={{index}} on-change="calcularPrecoSugeridoEvento></paper-input>

那么您可以访问 index使用

new PolymerEvent(event).localTarget.dataset['index']
// or
new PolymerEvent(event).localTarget.attributes['data-index']

对于 <template id="lista_produtos" is="dom-repeat" ...>我成功地使用这两个变种得到 DomRepeatModel

  @reflectable
  event([dom.Event event, _]) {
    DomRepeatModel model = ($['lista_produtos'] as DomRepeat)
        .modelForElement(event.target);
    // or
    model = 
        new DomRepeatModel.fromEvent(convertToJs(event));    
    var index = model.index;
  }