1

paper-shadowツイートを表示するために拡張するカスタム Polymer 要素を作成しようとしています。

これが私の実装です：

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>

ツイッターダーツ

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

  ...    

}

最後に、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) {
4

1 に答える 1

1

ラルフ。

次の 2 つの方法でそれを行うことができます。

オプションA

Dart コードで Polymer 要素を作成する場合は、次の方法でそのタグを作成するだけです。

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"

または、カスケード演算子が好きな場合は、代わりに次のように記述できます。

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

お役に立てれば。

于 2015-07-17T16:58:14.047 に答える