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

如果CustomElement 中的years 设置为某个值，给定代码工作正常，现在我想在我的主脚本中设置它。如果属性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 没有 setter 年份的原因。添加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));

另见

• Instantiating polymer element via dart code
• how to implement a main function in polymer apps

Answer 2

尝试简单地将值分配给字段：

import 'package:observe/observe.dart';

initPolymer().run((){
  querySelect("#custom-elements").children.add(
    new Element.tag("custom-element")
    ..id = "my_custom_element"
    ..years = toObservable(["2010"])
  );
});

通常在主要聚合物元素中使用自定义元素，并且像年份这样的属性被绑定到它的范围：

<link rel="import" href="../../../../packages/polymer/polymer.html">
<polymer-element name="main-element">
  <template>
    <custom-element years="{{years}}"></custom-element>
  </template>
  <script type="application/dart" src="main_element.dart"></script>
</polymer-element>

@CustomTag("main-element")
class MainElement extends PolymerElement {
  @published List<String> years = toObservable(["2010"]);      
  MainElement.created() : super.created();
}