Dart 创建自定义聚合物元素

我正在尝试创建一个自定义的聚合元素，它扩展了

纸影

来显示Tweet

以下是我的实现：

tweet\u element.html

<link rel="import" href="packages/paper_elements/paper_shadow.html">
<link rel="import" href="packages/polymer/polymer.html">
<link rel="stylesheet" href="tweet_element.css">

<polymer-element name="tweet-element" extends="paper-shadow">

  <template>
    <div id="header">
      <div id="user-image">
        <img src="{{userImageUrl}}">
      </div>
      <div id="details">
        <div id="user">{{user}}</div>
        <div id="date-published">{{datePublished}}</div>
      </div>
    </div>

    <div id="content">
      <div id="text">{{text}}</div>
      <div id="photos">{{photos}}</div>
    </div>
  </template>

  <script type="application/dart" src="twitter.dart"></script>

</polymer-element>

最后是创建TweetElement并尝试将其添加到DOM的代码：

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'twitter.dart';

...

var mainContent = querySelector('#main-content');
var element;
for (var tweet in tweets) {
  element = new TweetElement.created();
  element.update(tweet);
  mainContent.children.add(element);
}

当我运行这个时，我得到：

Exception: Uncaught Error: created called outside of custom element creation.

于是我尝试将twitter.dart改为：

TweetElement.created() : super.created();

TweetElement (Tweet tweet) {
  TweetElement.created();
  userImageUrl = tweet.user.profileImage;
  user = '${tweet.user.name} (@${tweet.user.screenName})';
  datePublished = _parseDate(tweet.date);
  text = tweet.text;
}

并将元素添加到DOM中，如下所示：

var mainContent = querySelector('#main-content');
var element;
for (var tweet in tweets) {
  element = new TweetElement(tweet);
  mainContent.children.add(element);
}

现在我得到了这个错误：

Internal error: unresolved implicit call to super constructor 'PolymerElement()' TweetElement (Tweet tweet) {

拉尔夫

您可以通过两种方式实现这一点：

选项A

如果要在Dart代码中创建聚合物元素，只需按以下方式创建该标记：

var myTweetElement = new Element.tag ('tweet-element');
mainContent.childern.add(myTweetElement);

此外，请检查是否已导入html库：

import 'dart:html';

选项B：（最酷的）

通过将此工厂添加到您的twitter.dart，您可以更加方便地完成此任务（并且更加面向对象）：

factory TweetElement () => new Element.tag('tweet-element');

然后，在dart代码中创建标记更具可读性：

var myTweetElement = new TweetElement (); // This uses the factory transparently
mainContent.children.add(myTweetElement);

此外，还可以设置属性的值。由于这些是可见的，绑定将自动更新：

myTweetElement.userImageUrl   = "foo"
myTweetElement.user           = "bar"
myTweetElement.datePublished  = "baz"
myTweetElement.text           = "qux"

或者，如果您喜欢cascade运算符，可以编写以下代码：

myTweetElement..userImageUrl  = "foo"
              ..user          = "bar"
              ..datePublished = "baz"
              ..text          = "qux";

---

希望这有帮助

谢谢@Gonzalo，但是我该如何用新的

元素标记（'tweet\u元素'）

的

tweet\u元素.html

的

tweet

数据来填充

element.tag（'tweet\u元素'）

的模板字段（

{user}

，

{code>{text}}

），我已经添加了您提到的工厂，即使现在正在显示元素，数据绑定字段为空。

myTweetElement.=无效。我设法解决了数据绑定问题。我注意到我使用的是
@Observable
标记，而不是
@Observable
（请注意大写）。
myTweetElement..userImageUrl  = "foo"
              ..user          = "bar"
              ..datePublished = "baz"
              ..text          = "qux";