Polymer 1.0 - iron-list - selection

问题

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'

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

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://elements.polymer-project.org/elements/iron-list

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.

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

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

On Dart side:

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

}

回答1:

Change the line

Object objText = e.selectedItem;

ItemText objText = convertToDart(e.selectedItem);

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

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

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
}

来源：https://stackoverflow.com/questions/33448961/polymer-1-0-iron-list-selection

标签

dart

dart-polymer