Question

我无法获得一个简单的核心列表来显示其数据。

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

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

我只是希望看到显示的名称，并在点击该行时打印行项目数据（在标签上）。

我看了一些例子，但他们没有帮助。

由于

Answer 1

我认为您的主要问题是void onReady应该是这样的：

@override
void ready() {
  ...
}

<core-list-dart/>内的模板元素应如下所示：

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

这可能是由于复制/粘贴到StackOverflow，但是在属性声明的中间不应该有任何空格（例如，rel = 'import'应该是rel='import'）并且应该没有t是$[ 'kore-list' ].和on['core-activate'].listen( handleListChange );

之间的空格

Answer 2

如果您希望模型类的字段可观察，则不仅需要@observable注释，还需要Observable mixin

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

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

对于Polymer元素类中的字段，您不需要这样，因为PolymerElement已包含Observable。

您不需要列表项repeat标记上的<template>。 <core-list-dart>做了重新考虑。我认为主要问题是模板标签中的if。这应该足够了：

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

创建并显示简单的核心列表

2 个答案: