我已经构建了一个使用嵌套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;
}
}
}
}
任何帮助,提示,祝福,祈祷将不胜感激!谢谢!
我猜这是 dart2js 的一个错误。为了回答这个问题“动态创建聚合物元素”，我构建了一个示例。
此代码（如您在问题中所示）生成正确的标记，但表单元素无法正常工作。我没有进一步检查这种行为，因为我自己从来不需要扩展 DOM 元素。
您也可以尝试不扩展该<FORM>元素，而是创建一个新的 Polymer 元素并嵌入该<FORM>元素。
| 归档时间： |
|
| 查看次数： |
501 次 |
| 最近记录： |