Привязка данных шаблона

Я пытаюсь создать пользовательский элемент с привязкой данных.

Вот мой пользовательский шаблон элемента:

<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, но поля с привязкой данных пусты:

Chrome DOM

С объектами tweet проблем нет, потому что я пытался установить поля элемента с другими строками, и это также не сработало.


person Rafael    schedule 17.07.2015    source источник


Ответы (2)


Если у вас есть собственный основной метод в приложении Polymer.dart, вам нужно самостоятельно позаботиться об инициализации Polymer.
См. как реализовать основную функцию в полимерных приложениях для более подробной информации.

person Günter Zöchbauer    schedule 18.07.2015

Мне удалось решить проблему. Я использовал тег @Observable вместо @observable (обратите внимание на прописные/строчные буквы).

person Rafael    schedule 18.07.2015