Wednesday, September 11, 2013

Dart Element.html bug

I found a bug in dart2js for handling Element.html.
when we run an app using this feature, Dartium can run properly, but js version, the  result is not correct.
It expects to show items in a table, but they are not shown in the js version.
I thought this comes from a problem handling Element.html, so I replaced it with Element.tag, and it worked on both ways.
In fact, Element.html looks too heavy way to construct page elements, so there might be a better way, (not go the other end of using tag constructors), but such difference are very annoying problem if we decide to use Dart.
So this problem should be fixed.

this is  the projects to test this problem.

I created simple test projects.
here is a snipe of code what cause the problem and how we can avoid the problem..
------------------------
// this is buggy version

  refreshUi(List<Expense> expenses) {
    _updateRootElement();

    Element tableElement = new Element.tag("table");
    Element head = new Element.html("""
          <thead>
            <td class="type">Type</td>
            <td class="date">Date</td>
            <td class="detail">Item</td>
            <td class="amount">Amount</td>
            <!--<td class="claimed>Claimed?</td>-->
            <td class="edit">&nbsp;</td>
          </thead>""");

     tableElement.nodes.add(head);

     for (Expense ex in expenses) {
       tableElement.nodes.add(_getRowElement(ex));
     }

    rootElement.nodes.add(tableElement);
  }
=====>
// this is a workaround.

  refreshUi(List<Expense> expenses) {
    _updateRootElement();

    Element tableElement = new Element.tag("table");
    rootElement.nodes.add(tableElement);
    Element thead = new Element.tag("thead");
    thead.nodes.addAll([
        newTd('type', 'Type'),
        newTd('date', 'Date'),
        newTd('detail', 'Item'),
        newTd('amount', 'Amount'),
        newTd('edit', ''),
        newTd('delete', '')
        ]);
 
    tableElement.nodes.add(thead);
    for (Expense ex in expenses) {
      tableElement.nodes.add(_getRowElement(ex));
    }
  }
Element newTd(cls, txt) {
  Element td = new Element.td();
  td.attributes['class'] = cls;
  td.text = txt;
  return td;
}


No comments:

Post a Comment