Polymer-Dart传递元素作为属性

时间:2015-08-29 15:07:11

标签: dart polymer dart-polymer

感觉就像,我在几个月前使用Polymer 0.5的所有问题再次出现在1.0 ......

我有一个自定义元素,它定义了一个属性,我想要一个元素,以便我以后可以使用它。

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

我使用这段代码创建元素:

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

我的控制台输出是:

  

动画:目标从“null”变为“null”

     

动画:目标现在是“空”

     

动画:使用目标“null”创建的动画

为什么?我怎样才能传递一个元素? - 或者这不可能吗?

1 个答案:

答案 0 :(得分:1)

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

  

路径语法不支持数组样式的访问器(例如users [0] .name)。但是,您可以直接在路径(users.0.name)中包含索引。

因此,您应该可以将$['loginButton']更改为$.loginButton然后它应该有效。