Вложенный полимерный элемент не присоединяется при запуске как JavaScript

Я создал приложение Polymer.dart, которое использует вложенные элементы Polymer. Родительский элемент принимает атрибут и передает его значение вложенному дочернему элементу в качестве атрибута. Это прекрасно работает, когда "Запуск в Dartium" изнутри DartEditor, но вложенный элемент не загружается после того, как приложение "Pub Built" и "Run as JavaScript". Нет никаких сообщений об ошибках во время процесса сборки или каких-либо указателей любого другого вида. Я не знаю, как отладить это, и тот факт, что он работает, как и ожидалось, без каких-либо предупреждений или ошибок в Dartium, не помогает.

Ниже приведен код для упрощенной версии моего приложения, которая вызывает ту же проблему. my_view является родительским элементом и my_form является вложенным элементом, который присоединяется, когда my_view загружен.

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

Любая помощь, советы, добрые пожелания, молитвы будут с благодарностью! Спасибо!

Источник

1 ответ

Я предполагаю, что это ошибка dart2js. Для ответа на этот вопрос динамически создать полимерный элемент я построил пример.

Этот код (как вы показали в своем вопросе) генерирует правильную разметку, но элемент формы не работал должным образом. Я не стал больше изучать это поведение, потому что мне никогда не требовалось расширять элемент DOM.

Вы также можете попытаться не продлевать <FORM> элемент, но создайте новый элемент Polymer и просто вставьте <FORM> элемент.

Источник
Другие вопросы по тегам