[英]Creating a custom Polymer element
I'm trying to create a custom Polymer element that extends paper-shadow
to display a Tweet. 我正在尝试创建一个自定义的Polymer元素,该元素可以扩展
paper-shadow
以显示Tweet。
Here is my implementation: 这是我的实现:
tweet_element.html tweet_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>
twitter.dart twitter.dart
import 'package:polymer/polymer.dart';
@CustomTag('tweet-element')
class TweetElement extends PolymerElement {
@Observable String userImageUrl;
@Observable String user;
@Observable String datePublished;
@Observable String text;
TweetElement.created() : super.created();
void update(Tweet tweet) {
userImageUrl = tweet.user.profileImage;
user = '${tweet.user.name} (@${tweet.user.screenName})';
datePublished = _parseDate(tweet.date);
text = tweet.text;
}
...
}
And finally the code that creates a TweetElement and tries to add it to the DOM: 最后是创建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);
}
And when I run this I get: 当我运行它时,我得到:
Exception: Uncaught Error: created called outside of custom element creation.
So then I tried to change twitter.dart to: 因此,我尝试将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;
}
And add the element to the DOM like this: 并将元素添加到DOM中,如下所示:
var mainContent = querySelector('#main-content');
var element;
for (var tweet in tweets) {
element = new TweetElement(tweet);
mainContent.children.add(element);
}
And now I got this error: 现在我得到了这个错误:
Internal error: unresolved implicit call to super constructor 'PolymerElement()' TweetElement (Tweet tweet) {
Ralph. 拉尔夫。
You can do that in two ways: 您可以通过两种方式做到这一点:
Option A 选项A
If you want to create a Polymer Element in your Dart code, you just have to create that tag this way: 如果要在Dart代码中创建Polymer元素,则只需采用以下方式创建该标签:
var myTweetElement = new Element.tag ('tweet-element');
mainContent.childern.add(myTweetElement);
Also, check that you have imported the html library: 另外,请检查您是否已导入html库:
import 'dart:html';
Option B: (the coolest one) 选项B :(最酷的一种)
You can do it extra convenient (and more object oriented) by adding this factory to your twitter.dart : 您可以通过将此工厂添加到twitter.dart中来实现额外的便捷(并且更加面向对象):
factory TweetElement () => new Element.tag('tweet-element');
Then, the creation of the tag in your dart code, is more readable: 然后,在您的飞镖代码中创建标签的可读性更高:
var myTweetElement = new TweetElement (); // This uses the factory transparently
mainContent.children.add(myTweetElement);
Additionally, you can set the values of your properties. 此外,您可以设置属性的值。 As those are observable, the bindings will update automagically:
可以看到的是,绑定将自动更新:
myTweetElement.userImageUrl = "foo"
myTweetElement.user = "bar"
myTweetElement.datePublished = "baz"
myTweetElement.text = "qux"
Or if you like the cascade operator, you can write this instead: 或者,如果您喜欢级联运算符,则可以编写以下代码:
myTweetElement..userImageUrl = "foo"
..user = "bar"
..datePublished = "baz"
..text = "qux";
Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.