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

Question

在下面的例子中：

captureIndex.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。但它是 null.

我不想在事件中使用 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}} 是个坏主意。

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

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

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

如果您确实想使用 HTML 属性，您需要将“$”添加到属性名称以实际绑定到该属性（反映在 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;
  }

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

How to capture item model.index of the dom-repeat template (or iron-list) on Dart side?

dart

dart-polymer