Polymer-Dart passing Elements as property

Question

It feels like, all the questions I had month ago with Polymer 0.5 are coming up again with 1.0...

I have a custom element which defines a property which I want to take an Element such that I can work with it later on.

@HtmlImport('test_animation.html')
library test.animation

import 'dart:html';
import 'dart:js';
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:test/log.dart';
import 'dart:async';

// @jsProxyReflectable
@PolymerRegister('test-animation')
class TestAnimation extends PolymerElement {

  @Property(observer: 'targetChanged')
  Object target = null;

  factory TestAnimation() => new Element.tag('test-animation');

  TestAnimation.created() : super.created() {
    Log.d(tag: 'Animation', message: 'Animation created with target "$target"');
  }

  //@eventHandler
  @reflectable
  void targetChanged([newValue, oldValue]) {
    Log.d(tag: 'Animation', message: 'Target changed from "$oldValue" to "$newValue"');
    Log.d(tag: 'Animation', message: 'Target is now "$target"');
  }
}

I create the element using this piece of code:

<div id="buttonContainer">
    <paper-button id="loginButton" on-click="login">Login</paper-button>
    <paper-toast id="errorToast" text="Incorrect username or password."></paper-toast>
</div>

<test-animation target="{{$['loginButton']}}"></test-animation>

My console output is:

Animation: Target changed from "null" to "null"

Animation: Target is now "null"

Animation: Animation created with target "null"

Why is that? How can I pass an element? - or is this not possible yet?

I haven't done anything with Polymer 1.0 yet (except trying to make the sample we discussed in your recent question work). I remember that binding expressions in 1.0 are much more limited than in 0.5. Could be that $['loginButton'] isn't supported, but in this case I would expect an error message. I guess Jake well post more useful information when he sees the question though. In the meantime you could try to create a method which does the $['loginButton'] and just refer the method name in the binding expression. — Günter Zöchbauer

Jake MacDonald Jake MacDonald · Accepted Answer · 2015-08-31T14:39:11

From https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#path-binding:

The path syntax doesn’t support array-style accessors (such as users[0].name). However, you can include indexes directly in the path (users.0.name).

So, you should be able to change $['loginButton'] to $.loginButton and then it should work.

Polymer-Dart passing Elements as property

1 Answers