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脚本中，从服务器I中获取了一些数据后动态创建了这样的元素：

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没有一个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));

另见

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

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

2 个答案: