5

I have built a Polymer.dart app that uses nested Polymer elements. The parent element takes an attribute and passes its value to the nested, child elment as an attribute. This works fine when "Run in Dartium" from within DartEditor, but the nested element fails to load after the app is "Pub Built" and "Run as JavaScript." There are no error messages during the build process, or any pointers of any other sort. I don't know how to debug this and the fact that it runs as expected without any warnings or errors in Dartium doesn't help.

The following is the code for the simplified version of my app that produces the same problem. my_view is the parent element and my_form is the nested element that is attached when my_view is loaded.

main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>

    <link rel="import" href="my_view.html">

    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <h1>The view polymer element should appear below:</h1>
    <my-view viewAttribute="My_Value"></my-view>
  </body>
</html>

my_view.html

<polymer-element name="my-view" attributes="viewAttribute">
  <link rel="import" href="my_form.html">

  <template>
    <div style="width: 100%;"><h1>The form should appear below:</h1></div>
    <div id="form_div" style="width: 100%;"></div>
  </template>
  <script type="application/dart" src="my_view.dart"></script>
</polymer-element>

my_view.dart

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('my-view')
class MyView extends PolymerElement {

  @published String viewAttribute;

  DivElement _formSlot;

  MyView.created() : super.created() {
    _formSlot = $['form_div'];
  }

  void viewAttributeChanged() {
    _formSlot..append(new Element.tag('form', 'my-form')..setAttribute("formAttribute", viewAttribute));
  }
}

my_form.html

<polymer-element name="my-form" extends="form" attributes="formAttribute">
  <template>
    <div style="width: 100%;">Attribute value: {{formAttribute}}</div>
    <div style="width: 100%;">
      <label for="nameInput">name:</label>
      <input id="nameInput" type="text" value="{{nameValue}}" />
    </div>
    <div style="width: 100%;">
      <div id="button_div">
        <input type="submit" on-click="{{submitForm}}" value="send" />
      </div>
    </div>
  </template>
  <script type="application/dart" src="my_form.dart"></script>
</polymer-element>

my_form.dart

import 'package:polymer/polymer.dart';
import 'dart:async';
import 'dart:html';
import 'dart:convert';


@CustomTag('my-form')
class MyForm extends FormElement with Polymer, Observable {

  @published String formAttribute;

  @observable String nameValue;

  HttpRequest _request;

  MyForm.created() : super.created();

  void submitForm(Event e, var detail, Node target) {
    e.preventDefault();

    _request = new HttpRequest();

    _request.onReadyStateChange.listen(_onData);
    _request.open('POST', 'http://my.server.com/contact_form');
    _request.send(JSON.encode({'name': nameValue, 'attribute': formAttribute}));
  }

  _onData(_) {
    if (_request.readyState == HttpRequest.DONE) {
      switch (_request.status) {
        case 200:
          // Data was posted successfully
          break;

        case 0:
          // Post failed
          break;
      }
    }
  }
}

Any help, hints, well wishes, prayers would be greatly appreciated! Thanks!

Branka
  • 469
  • 1
  • 5
  • 11
  • Probably same reason? http://stackoverflow.com/questions/20914791/dart-vm-works-but-dart2js-fails – MarioP Jan 04 '14 at 13:23
  • MarioP, thanks for the link. The attribute fields are already annotated with `@published`, so it may not be the same issue, but I'll look into it further. – Branka Jan 04 '14 at 13:38
  • 1
    come to think of it - "Run with Dart2js" didn't work for me when I only did the `export "packages:polymer/init.dart"` in the html file, because dart2js never was invoked and no JS file was generated. For me, that never was an issue because i have other initialization to do anyway, but your case is different. could you try making a very simple main dart file, which just calls `initPolymer()` of polymer.dart and including that in the main HTML file instead? – MarioP Jan 04 '14 at 15:03
  • The form is displayed without a problem in JS mode when the form element is placed directly inside the host html file without nesting as `
    `. This problem has something to do with either passing an attribute to nested child polymer element or the way that the form is attached dynamically.     – Branka Jan 04 '14 at 21:05

1 Answers1

0

I guess this is a dart2js bug. For answering this question Dynamically create polymer element I built an example.

This code (like you showed in your question) generates the correct markup but the form element didn't work properly. I didn't examine this behaviour further because I myself never needed to extend a DOM element.

You could also try not to extend the <FORM> element but create a new Polymer element and just embed the <FORM> element.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • The problem is with the call to `setAttribute()`. When the call is removed, the problem doesn't occur. I am guessing it is due to a bug in `dart2js` where it can't handle the call to `setAttribute()` – Branka Jan 05 '14 at 22:07