how to display simple information using <core-list-dart>

Question

I saw several posts here but I still can't succeed display anything...

I try to run the example in the source code. https://github.com/dart-lang/core-elements/blob/master/lib/core_list_dart.html

this is my dart code

@CustomTag('exercise-list')
class ExerciseList extends PolymerElement {

  @observable int testBind = 50000;
  @observable ObservableList data;

  @observable int index;
  @observable bool selected;

  ExerciseList.created() : super.created();

  @override
  void onReady() {

    data = toObservable([
        new Person('Bob', true),
        new Person('Tim', false)
    ]);
  }
}

class Person extends Observable {
    @observable String name;
    @observable bool checked;

    Person(this.name, this.checked);
}

<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="../../../packages/core_elements/core_icons.html">
<link rel="import" href="../../../packages/core_elements/core_list_dart.html">
<polymer-element name="exercise-list">

    <template>

        test : {{testBind}}

        <core-icon icon="star"></core-icon>


        <core-list-dart data="{{data}}">
            <template>
                <div class="row {{ {selected: selected} }}" style="height: 80px">
                    List row: {{index}}, User data from model: {{model.name}}
                    <input type="checkbox" checked="{{model.checked}}">
                </div>
            </template>
        </core-list-dart>

    </template>
    <script type="application/dart" src="exercise_list.dart"></script>
</polymer-element>

name: app 
version: 0.0.1 
description: app 
environment: 
  sdk: '>=1.2.0 <2.0.0' 
dependencies: 
  browser: any 
  guinness: any 
  paper_elements: '>=0.6.0+2 <0.7.0' 
  core_elements: '>=0.5.0+2 <0.6.0' 
  polymer: '>=0.15.3 <0.16.0' 
  unittest: any 
transformers: 
- polymer: 
    entry_points: web/index.html

The value testBing and the core-icon are well displayed. It's weird I can't understand where is my problem... Hope you will find the problem. Cheers !

Update

Here is an example of the bare minimum code to display something with core-list-dart. note the mandatory fields in the model !!!

Answer 1

Update

There are a few issues with your code:

exercise_list.dart

• You are overriding onReady which is a getter not a method and can't be overridden. You want to override ready instead.

• When I load the page I get exceptions telling me that Person doesn't have a selected or index property. I added them to the class to
  get rid of the error without investigating why this is necessary.

class Person extends Observable {
    @observable String name;
    @observable bool checked;
    bool selected = false; // <== added
    int index; // <== added

    Person(this.name, this.checked);
}

exercise_list.html

• I removed model. from {{model.name}} and {{model.checked}}

Now the list is displayed.

All these things were reported by the development environment. I use WebStorm but I'm sure the same hints and errors would be shown by DartEditor and also by Dartium when run directly (shown in the developer tools console).

You can't reference fields of your exercise_list element in the template element passed to core-list-dart because the template is removed and applied inside the core-list-dart which changes its scope. This is why selected and index didn't work here.

Old

I guess the problem is that the core-list-dart needs an explicit height to be displayed but your code doesn't show how it is added to your page. (see also this discussion https://github.com/Polymer/core-list/issues/47#issuecomment-63126241)

The height is probably only applied if you set your element to display: block

<polymer-element name="exercise-list">

    <template>
      <style>
        :host {
          display: block;
        }
        core-list-dart {
          height: 500px;
        }
      </style>

      ....