Question

新手问题。我正在使用Polymer.dart，并按照初学者教程。 Dart代码被调用，但无法实例化PaperItem。我怎样才能做到这一点？我得到的错误是：

无法读取属性＆＃39; toString＆＃39; of null（下面的addTodoItem的第一行）

mini.dart

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_input.dart';
import 'package:paper_elements/paper_item.dart';
import 'package:core_elements/core_menu.dart';

PaperInput paperInput;
CoreMenu coreMenu;

void main() {
  print("enter main");
  initPolymer().run(() {
    Polymer.onReady.then((_) {
        paperInput = querySelector('#todo-input');
        coreMenu = querySelector('#todo-list');
        paperInput.onChange.listen(addTodoItem);
    });
  });
}

void addTodoItem(Event e) {
  PaperItem newTodo = new PaperItem.created();
  newTodo.text = paperInput.value;
  paperInput.value='';
  coreMenu.children.add(newTodo);
}

mini.html

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mini</title>

<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
     not necessary anymore with Polymer >= 0.14.0 -->

<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/core_elements/core_menu.html">
<link rel="import" href="packages/paper_elements/paper_tabs.html">
<link rel="import" href="packages/paper_elements/paper_input.html">
<link rel="import" href="packages/paper_elements/paper_item.html">

<script type="application/dart" src="mini.dart"></script>
<script async src="packages/browser/dart.js"></script>

<link rel="stylesheet" href="mini.css">

</head>
<body unresolved touch-action="auto">
  <core-header-panel> <core-toolbar>
  <paper-tabs id="tabs" selected="all" valueattr="name" self-end>
  <paper-tab name="all">ALL</paper-tab> <paper-tab name="favorites">FAVORITES</paper-tab>
  </paper-tabs> </core-toolbar>

  <h2>TODO list</h2>

  <div>
    <paper-input floatingLabel label="Action Item" id="todo-input">
    </paper-input>
  </div>

  <div>
    <core-menu id="todo-list"> </core-menu>
  </div>

  </core-header-panel>
</body>
</html>

Answer 1

这不是动态创建Polymer元素实例的正确方法

PaperItem newTodo = new PaperItem.created();

正确的方法是

PaperItem newTodo = new Element.tag('paper-item');

或

var newTodo = new Element.tag('paper-item') as PaperItem;

正如附加说明：
扩展DOM元素的聚合物元素（核心元素或纸质元素不是这种情况）需要一个额外的参数 - 有关更多详细信息，请参阅Dynamically create polymer element。

如何在Dart中初始化纸质元素？

1 个答案: