dart-archive / polymer-dart

Polymer support for Dart
https://pub.dartlang.org/packages/polymer
BSD 3-Clause "New" or "Revised" License
181 stars 33 forks source link

Polymer 1.0 - iron-list - for structured item in list, selectedItem not full valid dart Object #633

Open jonboj opened 8 years ago

jonboj commented 8 years ago

In iron-list selectedItem works ok for e.g. String, but for structured datatypes get to member data fails. Stackoverflow discussion http://stackoverflow.com/questions/33448961/polymer-1-0-iron-list-selection The html and dart snippets are inserted below. When a selection is done following is obtained:

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

With convertToDart(e.selectedItem); the object becomes valid. The Observe argument newValue is valid and no conversion needed.

Html

<dom-module id="list-demo">

  <template>

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

  </template>

</dom-module>

Dart

class ItemText extends JsProxy {

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

const String text = 'Some text for the long run';

/// Uses [PaperInput]
@PolymerRegister('list-demo')
class ListDemo extends PolymerElement {

  @property
  List<ItemText> listitem;

  @property
  String selectedLocalItem;

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

  @Observe('selectedLocalItem')
  void selectedItemChanged(ItemText newValue) {
    print('selectedLocalItem');

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

    if (newValue != null){
      print('Contains : ${listitem.contains(newValue)}');
      print('The short text : ${newValue.shorttext}');
    }
  }

}

From pubspec.yaml

environment:
  sdk: '>=1.9.0 <2.0.0'

dependencies:
  browser: ^0.10.0
  polymer_elements: ^1.0.0-rc.3
  polymer: ^1.0.0-rc.5
  reflectable: ^0.3.3
  web_components: '>=0.11.3 <0.13.0'
  polymer_interop: ^1.0.0-rc.4