Question

我在这里看到了几个帖子，但我仍然无法显示任何内容...

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

这是我的飞镖码

@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 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的{{1}}元素中引用template元素的字段，因为core-list-dart已移除并应用于template这改变了它的范围。这就是core-list-dart和selected在这里不起作用的原因。

旧

我想问题是index需要显示一个明确的高度，但是你的代码没有显示它是如何添加到你的页面的。（另见本讨论https://github.com/Polymer/core-list/issues/47#issuecomment-63126241）

如果您将元素设置为core-list-dart

，则可能仅应用高度

display: block

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

更新

1 个答案:

更新

旧