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模板（或铁列表）的项目model.index？

1 个答案: