无法在飞镖聚合物 webapp 中重复工作

Question

1. 创建了一个默认的聚合物网络应用程序
2. 将 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>

1. 像这样更改 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()));
  }
}

4. 在 createModel Objects 处设置断点并在 Dartium 或 javascript 中运行 index.html。断点命中 3 次，为什么？
5. 如何在 webapp/dart 编辑器中遇到断点时查看跟踪。
6. 现在我的第二个问题，将 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>

1. 重新启动，我什么也看不到 - 我希望有一个项目元素表 我错过了什么？

2. 我在 dartium 中运行调试工具，看到以下元素 如何查看代码片段？

3. 不确定调试这种情况的推荐方法是什么。有什么帮助吗？

Answer 1

4) 我无法复制

5) 当调试器遇到断点时，调试器视图会显示调用堆栈。似乎很明显，因此很难解释。您在调试器视图中看不到调用堆栈，或者您根本没有调试器视图？ 要获得更好的堆栈跟踪检查How to get the full stack trace for async execution（仅打印）

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。