聚合物1.0 - 铁列表 - 选择 [英] Polymer 1.0 - iron-list - selection

问题描述

使用dart Polymer 1.0中的iron-list。尝试实现列表中选择项目的铁列表。

Working with iron-list in dart Polymer 1.0. Try to implement a iron-list with selection of an item in the list. This works when the item is a String, but fails for a structured type.

当运行下面的代码时，下面的打印输出。

When running the code below following printout is obtained.

>Contains : false
>Uncaught Unhandled exception:
>NoSuchMethodError: method not found: 'shorttext'
>Receiver: Instance of 'JsObjectImpl'

一个断点内部（objText！= null）listobjText- > JavaScriptView - > proto > get / set shorttext关闭，但暗示绑定有问题。

A breakpoint inside (objText != null) list "objText->JavaScriptView->proto>get/set shorttext" Close, but suggesting something wrong with the binding.

铁列表文档提到了对项目执行操作。文档中的JavaScript示例具有选择并使用模型。

The iron-list documentation mention something about putting an action on the item. The JavaScript example in the documentation has selection and uses a model.

https：//元素。 polymer-project.org/elements/iron-list

如果为true，点击一行将选择该项目，将其

When true, tapping a row will select the item, placing its data model in the set of selected items retrievable via the selection property.

请注意，点击列表项中的可聚焦元素不会导致选择，因为它们被假定为具有他们的*自己的行动。

Note that tapping focusable elements within the list item will not result in selection, since they are presumed to have their * own action.

好，任何人都进入dart-polymer 1.0的类似部分？

Ok, anyone been into similar parts of dart-polymer 1.0? also just suggestions of how to work with a selection of an iron-list are welcome?

Html侧：

 <iron-list id="id_list" items="{{listitem}}" as="item" selection-enabled>
   <template>
     <paper-item on-tap="tap_event">{{item.shorttext}}</paper-item>
   </template>
 </iron-list>

在飞镖侧：

class ItemText extends JsProxy {

  @reflectable
  String shorttext;
  ItemText(this.shorttext);
}

@PolymerRegister('list-demo')
class ListDemo extends PolymerElement {

  @property
  List<ItemText> listitem;

  @property
  int nrelements = 10;

  // Constructor used to create instance of MainApp.
  ListDemo.created() : super.created(){
    List<ItemText> l = [];

    for (int i = 0; i < nrelements; ++i){
      l.add(new ItemText('Name ' + i.toString()));
    }

    listitem = l;
    print('created : ${$['id_list'].selectionEnabled}');
    this.notifyPath('listitem', listitem);
  }

  @reflectable
  void tap_event(event, [_]) {

    IronList e = $['id_list'];
    Object objText = e.selectedItem;
    if (objText != null){
      print('Contains : ${listitem.contains(objText)}');
      print('The short text : ${objText.shorttext}');
    }
  }

}

推荐答案

更改行

Object objText = e.selectedItem;

到

ItemText objText = convertToDart(e.selectedItem);

我猜这是一个错误。请在 https://github.com/dart-lang/polymer-dart

I guess this is a bug. Please report at https://github.com/dart-lang/polymer-dart

我建议不要使用Polymer元素的 .created（）构造函数。改用 attached（）或 ready（）

I suggest not using the .created() constructor of Polymer elements. Use attached() or ready() instead.

考虑将 selectedItem 绑定到属性，并在 selectedItem 值改变，而不是 on-tap 事件。

Consider binding selectedItem to a property and run your code when the selectedItem value changes for this purpose, instead of the on-tap event.

`<iron-list ... selected-item="{{selectedItem}}">`

@Property(observer: 'selectedItemChanged') ItemText selectedItem;

@reflectable
void selectedItemChanged(newValue, oldValue) {
  // your code here
}

或

@property ItemText selectedItem;

@Observe('selectedItem')
void selectedItemChanged(ItemText newValue) {
  // your code here
}

这篇关于聚合物1.0 - 铁列表 - 选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！