Question

我已经构建了一个使用嵌套Polymer元素的Polymer.dart应用程序。父元素接受一个属性，并将其值作为属性传递给嵌套的子元素。这在DartEditor中“Run in Dartium”时工作正常，但在应用程序为“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;
      }
    }
  }
}

任何帮助，提示，祝福，祈祷都将不胜感激！谢谢！

Answer 1

我猜这是一个dart2js错误。为回答这个问题Dynamically create polymer element，我建立了一个例子。

此代码（就像您在问题中显示的那样）生成了正确的标记，但表单元素无法正常工作。我没有进一步检查这种行为，因为我自己从不需要扩展DOM元素。

您也可以尝试不扩展<FORM>元素，但要创建一个新的Polymer元素，只需嵌入<FORM>元素。

运行为JavaScript时未附加嵌套的聚合物元素

1 个答案: