how to retrieve item from an unordered list in polymer dart

Question

I'm using template repeat to generate a list of item. Simple question here how can I retrive the 'item' I click on in my 'addme' method I can see my print in the console

Here is my code

<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);
}

Cheers

Looks like a dup of http://stackoverflow.com/questions/24530054 — Günter Zöchbauer, Dec 05 '14 at 05:15

score 2 · Answer 1 · edited May 23 '17 at 12:22

From this answer:

use the template-value attribute in your template:

<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>

use nodeBind in your event handler:

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);
}

montyr75 · Answer 2 · 2014-12-05T05:35:31.100

There are lots of ways! Depends on what kind of data you really need. For instance, if you can track down your item instance using the name (or other identifying info), you could do something like this:

<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>

Then in the event handler:

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

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

Or you could create a custom element for your items, maybe <item-view>, and repeat those.

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

That makes it even easier and cleaner to get at the item instance you want, because target will have a public property containing the reference. Let me know if you'd like to see a more thorough example of that approach.

And you can even do it with enumeration, which would allow you to get the index within the repeat, and that same index could be used to look up the item instance in the original List (assuming it's a List you're repeating over). That looks like this:

<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>

You can get the index inside addme() like:

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

Confused yet? Always so many ways to do things, eh?

Thanks for your answer. I think the neat way to do that is to use a component like you said : . I put my on-click method within the template of item-view I don't know if it's the good way or not so if you have some examples I'm interesting :) cheers — BenNG, Dec 09 '14 at 16:57
If you're just trying to create a list of selectable items, one good way is to surround your ` — montyr75, Dec 10 '14 at 18:26
The `` element has been in flux, since the JS version has, too. So I haven't really used that element yet. Seems like it'll be one of the best ways to go, though. — montyr75, Dec 10 '14 at 18:28

score 0 · Answer 3 · answered Oct 15 '15 at 11:36

Polymer >= 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">
}

There is an open issue related to custom events: https://github.com/dart-lang/polymer-dart/issues/624

how to retrieve item from an unordered list in polymer dart

3 Answers3