Как извлечь элемент из неупорядоченного списка в полимерном дротике

Question

Я использую шаблон повтора для создания списка элементов. Простой вопрос здесь, как я могу получить "элемент", который я нажимаю в моем методе "addme", я могу увидеть свой отпечаток в консоли

Вот мой код

<template repeat="{{item in items}}">
 <div on-click="{{addme}}" layout horizontal justified>
      <div>{{item.name}}</div>
      <core-icon icon="settings"></core-icon>
 </div>
</template>

addme(event, details,node){
    print(event);
    print(details);
    print(node.selec);
    selectedExercises.add(ex);
}

ура

Answer 1

Есть много способов! Зависит от того, какие данные вам действительно нужны. Например, если вы можете отследить item Например, используя имя (или другую идентифицирующую информацию), вы можете сделать что-то вроде этого:

<template repeat="{{item in items}}">
  <div on-click="{{addme}}" data-item-name="{{item.name}}" layout horizontal justified>
    <div>{{item.name}}</div>
    <core-icon icon="settings"></core-icon>
  </div>
</template>

Затем в обработчике событий:

addme(event, details, target){
  String name = target.dataset['item-name'];

  // then find your item instance using "name"
}

Или вы можете создать пользовательский элемент для ваших предметов, может быть, <item-view>и повторите это.

<template repeat="{{item in items}}">
  <item-view item="{{item}}"></item-view>
</template>

Это делает его еще проще и чище item экземпляр, который вы хотите, потому что target будет иметь публичную собственность, содержащую ссылку. Дайте мне знать, если вы хотите увидеть более подробный пример такого подхода.

И вы даже можете сделать это с помощью перечисления, которое позволит вам получить индекс в пределах repeatи тот же индекс может быть использован для поиска item экземпляр в оригинале List (при условии, что это List ты повторяешься). Это выглядит так:

<template repeat="{{item in items | enumerate}}">
  <div on-click="{{addme}}" data-index="{{item.index}}" layout horizontal justified>
    <div>{{item.value.name}}</div>
    <core-icon icon="settings"></core-icon>
  </div>
</template>

Вы можете получить индекс внутри addme() лайк:

int index = int.parse(target.dataset['index']);

Смущены еще? Всегда так много способов делать вещи, а?

Answer 2

Из этого ответа:

используйте атрибут template-value в вашем шаблоне:

<template repeat="{{item in items}}">
  <div on-click="{{addme}}" layout horizontal justified template-value="{{item}}">
    <div>{{item.name}}</div>
    <core-icon icon="settings"></core-icon>
  </div>
</template>

используйте nodeBind в вашем обработчике событий:

import 'package:template_binding/template_binding.dart' as tb;

addme(event){
  tb.TemplateInstance ti = tb.nodeBind(e.target).templateInstance; // get access to the   TemplateInstance of the element

  // TemplateInstance provides access to the model and the actual value
  var ex = ti.model.value;

  selectedExercises.add(ex);
}

Answer 3

Полимер>= 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