模板数据绑定

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>

twitter.dart

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

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

main.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

如果您在 Polymer.dart 应用程序中有自定义 main 方法，您需要自己处理 Polymer 初始化。
有关详细信息，请参阅 how to implement a main function in polymer apps。

Answer 2

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

模板数据绑定

Template data binding

dart

polymer

dart-polymer

custom-element