我正在编写一个聚合物应用程序。我将聚合物元素扩展如下：
@CustomTag("custom-element")
class CustomElement extends PolymerElement {
@published List<String> years;
CustomElement.created() : super.created();
}
相应的html：
<link rel="import" href="../../../../packages/polymer/polymer.html">
<polymer-element name="custom-element" attributes="years">
<template>
Years listed are
<template repeat="{{ year in years }}">
<p> {{ year }} </p>
</template>
</template>
<script type="application/dart" src="custom_element.dart"></script>
</polymer-element>
在入口html文件中引用的dart脚本中，从服务器获取了一些数据后，我会动态创建以下元素：
initPolymer().run((){
querySelect("#custom-elements").children.add(
new Element.tag("custom-element")
..id = "my_custom_element"
);
});
如果将yearsinCustomElement设置为某个值，则给定的代码可以正常工作，现在我想在主脚本中对其进行设置。如果该属性years是类型，String那么我只需将最后一块更改为
initPolymer().run((){
querySelect("#custom-elements").children.add(
new Element.tag("custom-element")
..id = "my_custom_element"
..setAttribute("years", "2010")
);
});
但是问题是我需要设置一个整体List，而不是单个值。我不知道这样做的方法。我将如何处理？解决方案和建议非常受欢迎。
编辑：所以我的主要脚本如下
void main(){
// in reality this list is fetched from the server
List<String> customYears = ['2010', '2011'];
initPolymer().run((){
querySelect("#custom-elements").children.add(
new Element.tag("custom-element")
..id = "my_custom_element"
// HERE I would like to set a public field *years*
// of the CustomElement
// the following does not work
// 1.
// ..setAttribute('years', customYears)
// Exception: Uncaught Error: type 'List' is not a subtype of type 'String' of 'value'.
// 2.
// ..setAttribute('years', toObservale(customYears))
// Exception: Uncaught Error: type 'ObservableList' is not a subtype of type 'String' of 'value'.
// 3.
// ..years = customYears
// ..years = toObservable( custom Years )
// NoSuchMethodError: method not found: 'years='
);
});
}
所以问题是，如何为类本身之外的CustomElement实例的非字符串成员字段分配值？类中的直接分配不会引起任何问题，但这不是我想要的。我希望我现在能更清楚地解释自己。
基本上，@ Ozan会回答您的实际问题，但是还有其他问题。当代码分配值时，该元素尚未完全初始化。这就是Dart失败的原因，并告诉您HtmlElement没有设置年份。添加后，Polymer.onReady.then()Polymer会完全初始化，并且分配有效。
提示：如果将创建的元素转换为其具体类型，则DartEditor中不会收到警告。
import 'package:polymer/polymer.dart';
import 'dart:html';
// added import to be able to use the type
import 'custom_element.dart';
void main() {
// in reality this list is fetched from the server
List<String> customYears = ['2010', '2011'];
// Polymer => 0.16.0
initPolymer().then((zone) => zone.run(() {
Polymer.onReady.then((_) { // added - wait for onReady
querySelector("#custom-elements").children.add(
(new Element.tag('custom-element') as CustomElement)
..id = "my_custom_element"
..years = toObservable(customYears));
});
}));
}
将构造函数添加到自定义元素会更方便，例如
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('custom-element')
class CustomElement extends PolymerElement {
factory CustomElement() {
final x = new Element.tag('custom-element');
return x;
}
CustomElement.created() : super.created();
@published List<String> years;
}
然后您可以创建类似的元素
querySelector("#custom-elements").children.add(
new AppElement()
..id = "my_custom_element"
..years = toObservable(customYears));
也可以看看
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句