创建和显示一个简单的核心列表答案

【问题标题】：Creating and displaying a simple core-list创建和显示一个简单的核心列表
【发布时间】：2014-11-08 18:05:07
【问题描述】：

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

飞镖文件

  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>

我只是想查看显示的名称和单击行时打印的行项目数据（在选项卡上）。

我看过一些例子，但没有帮助。

谢谢

【问题讨论】：

标签： dart dart-polymer material-design core-elements

【解决方案1】：

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

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

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

Polymer 元素类中的字段不需要这个，因为PolymerElement 已经包含Observable。

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

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

【讨论】：

我进行了更正，但仍然没有显示任何内容。
@Günter Zöchbauer @Brian Geppert 之前回答的有点仓促。我看到现在显示的名称。然而下面是一个问题 |$[ 'kore-list' ].on['core-activate'].listen( handleListChange );| handleListChange 可能有问题。
如果模型名称有第三个属性'selected'，如何将模型'selected'绑定到上面html文件中div元素的'selected'属性？在 |
selected: {{selected}}
| div 文本显示正确，但 div 属性未绑定到可观察的选定属性。

【解决方案2】：

我认为您的主要问题是您的 void onReady 应该如下所示：

@override
void ready() {
  ...
}

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

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

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

【讨论】：

read() 也有问题。请看我上面的评论。我不太确定这些空间是否会造成问题。我一直在使用它们，没有任何问题。对我来说，它使代码更具可读性。不过我很欣赏这个建议。