dart - Dart Polymer:创建时如何在自定义中设置非字符串字段

Question

我正在编写一个聚合物应用程序。我将聚合物元素扩展如下:

@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"
  );
});

如果将 years中的 CustomElement设置为某个值，则给定的代码可以正常工作，现在我想在主脚本中进行设置。如果 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实例的 非字符串成员字段分配值？类中的直接分配不会引起任何问题，但这不是我想要的。我希望我现在能更清楚地解释自己。

Answer 1

基本上，@ Ozan会回答您的实际问题，但是还有其他问题。
当代码分配值时，该元素尚未完全初始化。这就是Dart失败的原因，并告诉您HtmlElement没有设置年份。添加Polymer.onReady.then()后，聚合物将完全初始化，并且分配工作正常。

提示:如果将创建的元素转换为其具体类型，则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));

也可以看看

Instantiating polymer element via dart code

how to implement a main function in polymer apps