How do I initialize a paper element in Dart?
Newbie problem. I am playing around with Polymer.dart and following the beginner tutorials. The Dart code is called but cannot instantiate the PaperItem. How can i do this? The error I am getting:
Cannot read property 'toString' from null (first addTodoItem line below)
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>
+3
source to share
1 answer
This is not the correct way to dynamically instantiate polymer elements
PaperItem newTodo = new PaperItem.created();
the right way
PaperItem newTodo = new Element.tag('paper-item');
or
var newTodo = new Element.tag('paper-item') as PaperItem;
Also as an additional note:
Polymer elements that extend DOM elements (which are not the case for core elements or paper elements) need an additional parameter - see Dynamically creating a polymer element for more details.
+2
source to share