dart - 模板数据绑定

Question

我正在尝试使用数据绑定创建自定义元素。

这是我的自定义元素模板：

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

<polymer-element name="tweet-element">

  <template>
    <link rel="stylesheet" href="tweet_element.css">

    <paper-shadow z="1">
      <div id="header" horizontal layout>
        <div id="user-image">
          <img _src="{{profileImage}}">
        </div>
        <div id="user-details" flex>
          <div horizontal layout>
            <div id="name">{{name}}</div>
            <div id="screen-name">(@{{screenName}})</div>
          </div>
          <div id="date-published">{{date}}</div>
        </div>
      </div>

      <div id="content">
        <div id="text">{{text}}</div>
      </div>
    </paper-shadow>
  </template>

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

</polymer-element>

推特飞镖

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

@CustomTag('tweet-element')
class TweetElement extends PolymerElement {
  @Observable String profileImage;
  @Observable String name;
  @Observable String screenName;
  @Observable String date;
  @Observable String text;

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

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

这就是我创建和添加元素的方式：

主要.dart

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

void main() {
  ...

  var mainContent = querySelector('#main-content');
  var element;
  for (var tweet in tweets) {
    element = new TweetElement();
    element
      ..profileImage = tweet.user.profileImage
      ..name = tweet.user.name
      ..screenName = tweet.user.screenName
      ..date = _parseDate(tweet.date)
      ..text = tweet.text;

    mainContent.children.add(element);
  }
}

tweet-element元素并被添加到 DOM，但具有数据绑定的字段为空白：

对象没有问题tweet，因为我尝试使用其他字符串设置元素字段，但它也不起作用。

Answer 1

我设法解决了这个问题。我使用的是@Observable标签而不是@observable（注意大写/小写字母）。

Answer 2

如果您在 Polymer.dart 应用程序中有自定义 main 方法，则需要自己处理 Polymer 初始化。
请参阅如何在聚合物应用程序中实现主要功能以获取更多详细信息。