Template data binding


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">

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

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

      <div id="content">
        <div id="text">{{text}}</div>

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



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

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:


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();
      ..profileImage = tweet.user.profileImage
      ..name = tweet.user.name
      ..screenName = tweet.user.screenName
      ..date = _parseDate(tweet.date)
      ..text = tweet.text;


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

Chrome DOM

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.


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)

Leave a Reply

Your email address will not be published. Required fields are marked *