无法在飞镖聚合物网络应用程序中重复工作
Can not get the repeat to work in a dart polymer webapp
- 创建了一个默认的 polymere 网络应用程序
- 删除几行main_app.html至此
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
- 像这样更改 main_app.dart 的内容
import 'package:polymer/polymer.dart';
class Project extends Observable
{
Project(this.name, this.dateCreated);
@published var name;
@published var dateCreated;
}
@CustomTag('main-app')
class MainApp extends PolymerElement {
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created()
{
}
/// Called when an instance of main-app is inserted into the DOM.
attached() {
createModelObjects();
super.attached();
}
/// Called when an instance of main-app is removed from the DOM.
detached() {
super.detached();
}
@published List<Project> projects = new List();
void createModelObjects() {
projects.add(new Project("InterSections Santa Rosa South inspection", new DateTime.now()));
projects.add(new Project("Playground Inspections Healdsburg ", new DateTime.now()));
projects.add(new Project("Pothole inspection Bloomfield Rd Sebastopol", new DateTime.now()));
}
}
- 在 createModel 对象和 运行 index.html 在 Dartium 或 javascript 处设置断点。断点跳了三次,为什么?
- 如何在 webapp/dart 编辑器中遇到断点时查看跟踪。
- 现在回答我的第二个问题,将 main_app.html 中的模板更改为:
<template>
<style>
:host {
display: block;
}
p {
margin: 20px;
padding: 80px 20px;
border-radius: 20px;
background-color: #eee;
}
</style>
<table>
<tr template repeat="{{project in projects}}">
<td> <p>Name and Date
{{name}}
{{dateCreated}}</p></td>
</tr>
</table>
</template>
重新启动,但我什么也没看到 - 我希望有 Table 个项目元素
我错过了什么?
我运行dartium中的调试工具,看到如下内容
我如何查看代码片段?
不确定调试这种情况的推荐方法是什么。有什么帮助吗?
4) 我无法重现
5) 当调试器遇到断点时,调试器视图会显示调用堆栈。似乎很明显,因此很难解释。您在调试器视图中看不到调用堆栈,或者您根本没有调试器视图?
要获得更好的堆栈跟踪,请检查 (仅打印)
6, 7) 这对我有用
<table>
<tr template repeat="{{project in projects}}">
<td><p>Name and Date
{{project.name}}
{{project.dateCreated}}</p></td>
</tr>
</table>
project
字段需要是一个可观察的集合,以便 Polymer 收到有关列表更改的通知
@published List<Project> projects = new List();
8) 你不能
如果您检查上面的 <div hidden>
,您会发现该元素使用的模板详细信息。
9)
当我在没有 {{project....}}
的情况下尝试您的代码时出现异常
附加提示:
使用 @observable
而不是 @published
。如果您仅从该组件中绑定到字段,也可以使用 @observable
而不是 @published。
- 创建了一个默认的 polymere 网络应用程序
- 删除几行main_app.html至此
<link rel="import" href="../../packages/polymer/polymer.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
- 像这样更改 main_app.dart 的内容
import 'package:polymer/polymer.dart';
class Project extends Observable
{
Project(this.name, this.dateCreated);
@published var name;
@published var dateCreated;
}
@CustomTag('main-app')
class MainApp extends PolymerElement {
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created()
{
}
/// Called when an instance of main-app is inserted into the DOM.
attached() {
createModelObjects();
super.attached();
}
/// Called when an instance of main-app is removed from the DOM.
detached() {
super.detached();
}
@published List<Project> projects = new List();
void createModelObjects() {
projects.add(new Project("InterSections Santa Rosa South inspection", new DateTime.now()));
projects.add(new Project("Playground Inspections Healdsburg ", new DateTime.now()));
projects.add(new Project("Pothole inspection Bloomfield Rd Sebastopol", new DateTime.now()));
}
}
- 在 createModel 对象和 运行 index.html 在 Dartium 或 javascript 处设置断点。断点跳了三次,为什么?
- 如何在 webapp/dart 编辑器中遇到断点时查看跟踪。
- 现在回答我的第二个问题,将 main_app.html 中的模板更改为:
<template>
<style>
:host {
display: block;
}
p {
margin: 20px;
padding: 80px 20px;
border-radius: 20px;
background-color: #eee;
}
</style>
<table>
<tr template repeat="{{project in projects}}">
<td> <p>Name and Date
{{name}}
{{dateCreated}}</p></td>
</tr>
</table>
</template>
重新启动,但我什么也没看到 - 我希望有 Table 个项目元素 我错过了什么?
我运行dartium中的调试工具,看到如下内容 我如何查看代码片段?
不确定调试这种情况的推荐方法是什么。有什么帮助吗?
4) 我无法重现
5) 当调试器遇到断点时,调试器视图会显示调用堆栈。似乎很明显,因此很难解释。您在调试器视图中看不到调用堆栈,或者您根本没有调试器视图?
要获得更好的堆栈跟踪,请检查
6, 7) 这对我有用
<table>
<tr template repeat="{{project in projects}}">
<td><p>Name and Date
{{project.name}}
{{project.dateCreated}}</p></td>
</tr>
</table>
project
字段需要是一个可观察的集合,以便 Polymer 收到有关列表更改的通知
@published List<Project> projects = new List();
8) 你不能
如果您检查上面的 <div hidden>
,您会发现该元素使用的模板详细信息。
9)
当我在没有 {{project....}}
附加提示:
使用 @observable
而不是 @published
。如果您仅从该组件中绑定到字段,也可以使用 @observable
而不是 @published。