无法在飞镖聚合物网络应用程序中重复工作

Can not get the repeat to work in a dart polymer webapp

  1. 创建了一个默认的 polymere 网络应用程序
  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()));
  }
}

  1. 在 createModel 对象和 运行 index.html 在 Dartium 或 javascript 处设置断点。断点跳了三次,为什么?
  2. 如何在 webapp/dart 编辑器中遇到断点时查看跟踪。
  3. 现在回答我的第二个问题,将 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. 重新启动,但我什么也没看到 - 我希望有 Table 个项目元素 我错过了什么?

  2. 我运行dartium中的调试工具,看到如下内容 我如何查看代码片段?

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

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。