dart - 如何使用<core-list-dart>显示简单信息

Question

我在这里看到了几篇文章，但仍然无法成功显示任何内容...

我尝试在源代码中运行该示例。
https://github.com/dart-lang/core-elements/blob/master/lib/core_list_dart.html

这是我的 Dart 代码

@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

值testBing和核心图标显示良好。很奇怪，我不明白我的问题在哪里...希望您能找到问题。干杯!

更新资料

Here是使用core-list-dart显示内容的最低限度代码示例。注意模型中的必填字段!!!

Answer 1

更新资料

您的代码存在一些问题:

exercise_list.dart

您正在覆盖onReady，这是一种获取方法，不是一种方法，不能
被覆盖。您想改写ready。

加载页面时，出现异常告诉我Person不
具有selected或index属性。我将它们添加到类(class)中
消除错误而无需调查为什么这样做是必要的。

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

我从model.和{{model.name}}

中删除了{{model.checked}}
现在显示列表。

所有这些事情都是由开发环境报告的。我使用WebStorm，但是我敢肯定，直接运行DartEditor以及Dartium也会显示相同的提示和错误(显示在开发人员工具控制台中)。

您无法在传递给exercise_list的template元素中引用core-list-dart元素的字段，因为template已删除并应用于core-list-dart内，这会更改其范围。
这就是为什么selected和index在这里不起作用的原因。

旧

我想问题是core-list-dart需要显式的高度才能显示，但是您的代码没有显示如何将其添加到页面中。 (另请参阅此讨论https://github.com/Polymer/core-list/issues/47#issuecomment-63126241)

仅当您将元素设置为display: block时，才可能应用高度

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

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

      ....