Creating and displaying a simple core-list

Question

Creating and displaying a simple core-list

367 Views Asked by st_clair_clarke At 04 April 2025 at 12:01

I cannot get a simple core-list to display its data.

DART FILE

  import 'package:polymer/polymer.dart';


  @CustomTag( 'core-list-demo' )
  class CoreListDemoForm extends PolymerElement
  {

    @observable
    List list;
    @observable bool selectionEnabled = true;

    CoreListDemoForm.created() : super.created();

    void selectionMade( e )
    {
      print( e['detail'].activate );
    }

    void onReady()
    {
      $[ 'kore-list' ].on ['core-activate'].listen( handleListChange );

      list = toObservable(
          [ new Name( 'Fred', 'Tomas'),
            new Name( 'Teddy', 'Clarke' ),
            new Name( 'Paul', 'Taggart' )
          ] );
    }

    handleListChange()
    {
      print ( 'list changed' );
    }

    void selection( e )
    {

    }


  }

  class Name
  {
    @observable String first = '';
    @observable String last = '';

    Name( this.first, this.last );
  }

HTML FILE

        <!DOCTYPE html>

        <link rel='import' href='../../../packages/polymer/polymer.html'>

        <link href = '../../../packages/core_elements/core_list_dart.html' rel = 'import' >

        <polymer-element name = 'core-list-demo'>
          <template>   
            <div class='card'>
                <h3>Core List</h3>
              <hr>
                    <core-list-dart 
                      id="kore-list" 
                      data="{{list}}" 
                      selectionEnabled="{{selectionEnabled}}"
                      selection="{{selection}}"
                      height="10" 
                      on-core-activate =  '{{ selectionMade }}'>
                        <template repeat if = "{{ list }}">
                            <div >{{ model.first }}</div>
                        </template>
              </core-list-dart>

          </div>    
          </template>

          <script type = 'application/dart' src = 'core_list_demo.dart'></script>
        </polymer-element>

I simply would like to see the name displayed and the row item data printed when the row is clicked (on-tab).

I have looked some examples but they have not helped.

Thanks

Original Q&A

There are 2 best solutions below

geppy On 08 November 2014 at 20:28

I think your main problem is that your void onReady should look like:

@override
void ready() {
  ...
}

Your template element inside of <core-list-dart/> should look like:

<template>
  <div>{{ model.first }}</div>
</template>

This might due to the copy/paste to StackOverflow, but you shouldn't have any spaces in the middle of your attribute declarations (for example, rel = 'import' should be rel='import') and there shouldn't be a space in between $[ 'kore-list' ]. and on['core-activate'].listen( handleListChange );

**Günter Zöchbauer** · Accepted Answer

If you want the fields of your model class observable you not only need the @observable annotation but also the Observable mixin

 class Name extends Object with Observable
  {
    @observable String first = '';
    @observable String last = '';

    Name( this.first, this.last );
  }

You don't need this for fields in a Polymer element class because PolymerElement already includes Observable.

You don't need the repeat on the <template> tag for the list item. <core-list-dart> does the reapeating. I think the main problem is the if in the template tag though. This should be enough:

<template>
  <div >{{ model.first }}</div>
</template>

Creating and displaying a simple core-list

There are 2 best solutions below

Related Questions in DART

Related Questions in DART-POLYMER

Related Questions in MATERIAL-DESIGN

Related Questions in CORE-ELEMENTS

Trending Questions

Popular # Hahtags

Popular Questions