如何从聚合物飞镖的无序列表中检索项目答案

【问题标题】：how to retrieve item from an unordered list in polymer dart如何从聚合物飞镖的无序列表中检索项目
【发布时间】：2014-12-04 22:56:18
【问题描述】：

我正在使用模板重复来生成项目列表。这里有一个简单的问题，如何检索我在“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);
}

干杯

【问题讨论】：

看起来像 stackoverflow.com/questions/24530054 的副本

标签： dart polymer dart-polymer

【解决方案1】：

来自this answer：

在你的模板中使用 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);
}

【讨论】：

【解决方案2】：

有很多方法！取决于你真正需要什么样的数据。例如，如果您可以使用名称（或其他识别信息）追踪您的 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 中的索引，并且可以使用相同的索引来查找原始List 中的item 实例（假设它是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']);

困惑了吗？做事总是有很多方法，嗯？

【讨论】：

感谢您的回答。我认为这样做的巧妙方法是使用您所说的组件：。我将我的点击方法放在项目视图的模板中我不知道这是否是好方法所以如果你有一些例子我很有趣:) 干杯
您如何看待“core-list”元素？
如果你只是想创建一个可选项目列表，一个好方法是用<core-selector> 元素包围你的<template repeat>。 That element will fire an event when one of its children is selected.使用这种方法，您在任何地方都不需要点击处理程序。您可以在此处查看正在使用的元素的一些示例：github.com/dart-lang/core-elements/blob/master/example/…
<core-list-dart> 元素一直在变化，因为 JS 版本也是如此。所以我还没有真正使用过那个元素。不过，这似乎是最好的方法之一。

【解决方案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

【讨论】：