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

Question

1. Created a default polymere web app
2. Delete a few lines of main_app.html to this

<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>

3. change the content of main_app.dart like this

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. Set a breakpoint at createModel Objects and run index.html in Dartium or javascript. The breakpoint hits three time, why?
5. How to I see a trace when a breakpoint hits in a webapp/dart editor.
6. Now to my second question, change the template in main_app.html to this:

  <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>

7. Restart and I see nothing - I would expect a Table of Project elements what do I miss?

8. I run the debugging tools in dartium and see the following elements How can I look into the code fragment?

9. Not sure what the recommended way is to debug this situation. Any help out there?

Answer 1

4) I can't reproduce

5) When the debugger hits a breakpoint the Debugger view shows the call stack. Seems obvious, therefore hard to explain. You don't see the call stack in the debugger view or you don't have the debugger view at all? To get better stack traces check How to get the full stack trace for async execution (print only)

6, 7) This worked for me

<table>
  <tr template repeat="{{project in projects}}">
    <td><p>Name and Date
      {{project.name}}
      {{project.dateCreated}}</p></td>

  </tr>
</table>

The project field needs to be an observable collection so Polymer gets notification about changes to the list

@published List<Project> projects = new List();

8) You can't If you inspect the <div hidden> above you find the used template details of this element.

9) I got an exception when I tried your code without {{project....}}

Additional hint:

use @observable instead of @published. You can also use @observable instead of @published if you bind to the field only from within this component.