Template data binding

Issue

I’m trying to create a custom element with data binding.

Here is my custom element template:

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

This is how I’m creating and adding the elements:

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

The tweet-element elements and being added to the DOM, but the fields with data binding are blank:

There is no problem with the tweet objects, because I’ve tried setting the element fields with other Strings and it also didn’t work.

Solution

I managed to solve the problem. I was using the @Observable tag instead of @observable (notice upper/lowercase letters).

Answered By – Rafael

Answer Checked By – Marilyn (FlutterFixes Volunteer)