Question

当我更新到最新的Dart库时，今天出现了一个问题。

子自定义元素是一个组合框。父自定义元素用不同的字符串列表填充它。

// child HTML
<polymer-element name="bx-icombo" attributes="aLabel aList aSelected">
  <template>
    <div class='outr' flex layout horizontal center>
      <label for='inp' flex end-justified>{{aLabel}}</label>
      <!-- wait until the data is available -->
      <template if='{{aList}}'>
        <paper-dropdown-menu id='inp' label='aLabel' valign='top' flex start-justified >
          <paper-dropdown class="dropdown">
            <core-menu id='m' class="menu" selected="{{aSelected}}">
              <template repeat='{{aList}}'>
                <paper-item name='{{}}'>{{}}</paper-item>
              </template>
            </core-menu>
          </paper-dropdown>
        </paper-dropdown-menu>
      </template>
    </div>
  </template>

  <script type='application/dart' src='bx_icombo.dart'></script>
</polymer-element>

//---------------------------------------------------------------
// child Dart
@CustomTag('bx-icombo')
class BxICombo extends PolymerElement {

  @PublishedProperty(reflect: true)  String       aLabel;
  @PublishedProperty(reflect: true)  List<String> aList;
  @PublishedProperty(reflect: true)  String       aSelected;

  BxICombo.created() : super.created();
  }

//---------------------------------------------------------------
// Parent HTML
<polymer-element name="tst-sigs">
  <template>
    <paper-dialog backdrop heading='Sigs' closeSelector=''>
      <bx-icombo aLabel='{{selectAsignal}}'
                 aList='{{sigsList}}'
                 aSelected='{{sigsSel}}'>
      </bx-icombo>
    </paper-dialog>
  </template>

  <script type='application/dart' src='tst_sigs.dart'></script>
</polymer-element>

//---------------------------------------------------------------
// Parent Dart
@CustomTag('tst-sigs')
class TstSigs extends PolymerElement {

  @observable List<String> sigsList = ['alpha', 'beta', 'gamma'];
  @observable String sigsSel;
  @observable String selectAsignal = 'Select a Signal';

  TstSigs.created() : super.created();
  }

//---------------------------------------------------------------

Dartium报道：

Attributes on bx-icombo were data bound prior to Polymer upgrading the element. This may result in incorrect binding types. (:1)

那么必须改变什么？ @PublishedProperty或@observable或@published或....我承认找到@ ...注释的迷宫很不清楚。

版本是：

Dart: 1.9.3 (STABLE)
Dartium: 39.0.2171.99

和包裹：

analyzer 0.24.6 (0.25.0+1 available)
args 0.12.2+6 (0.13.0 available)
barback 0.15.2+4
browser 0.10.0+2
cli_util 0.0.1+1
code_transformers 0.2.8
collection 1.1.0
core_elements 0.7.1+2
csslib 0.12.0
dart_style 0.1.8
glob 1.0.4
html 0.12.1+1
ini 1.1.0
initialize 0.6.0+4
intl 0.12.2
js 0.3.0
logging 0.9.3 (0.10.0 available)
markdown 0.7.1+2
matcher 0.11.4+4 (0.12.0-alpha.0 available)
observe 0.13.0+2
paper_elements 0.7.1
path 1.3.5
petitparser 1.3.7
polymer 0.16.1+4
polymer_expressions 0.13.1
polymer_interop 0.1.0+2
pool 1.0.1
quiver 0.21.3
smoke 0.3.2
source_maps 0.10.0+2
source_span 1.1.2
stack_trace 1.3.1
string_scanner 0.1.3+1
template_binding 0.14.0+2
utf 0.9.0+2
watcher 0.9.5
web_components 0.11.2
when 0.2.0
which 0.1.3
yaml 2.1.2

最初问题是代码变换器强制code_transformers < 0.2.5并且将聚合物限制在0.16.0。看起来代码变换器的东西已经解决，所以我删除了版本约束，并将聚合物更新为0.16.1。问题依然存在。

主要功能是

import  'package:polymer/polymer.dart';
import  'lib/bxglobs/bxGlobs.dart' as G;

void realMain() {
  // empty for this test
}

void main() {

  G.initGlobals();

  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) => realMain());
  }));
}

和pubspec.yaml：

name: bxPoly
description: BX GUI
dependencies:
  core_elements: any
  ini: any
  intl: any
  js: any
  markdown: any
  paper_elements: any
  polymer: any
  code_transformers: any
transformers:
- polymer:
    entry_points:
    - web/test.html

Answer 1

由于元素以错误的顺序注册，因此几乎总是会发生此错误。具体而言，父元素在子元素之前注册。

如果没有对代码的完全访问权限，很难诊断，但遵循这两条规则应该确保它不是问题：

将每个聚合物元素放在自己的html文件中，并将每个类放在自己的dart库中（使用部件尤其会导致问题）。
确保您的元素导入所有依赖项。

Answer 2

修改

<template if='{{aList != null}}'> <paper-dropdown-menu id='inp' label='aLabel' valign='top' flex start-justified > <paper-dropdown class="dropdown"> <core-menu id='m' class="menu" selected="{{aSelected}}"> <template repeat='{{a in aList}}'> <paper-item name='{{a}}'>{{a}}</paper-item> </template> </core-menu> </paper-dropdown> </paper-dropdown-menu>

<强>原始

如果从元素的shadow DOM绑定到其类@observable就足够了。

如果要绑定元素外部的属性，请使用@published。

如果要在CSS选择器中使用绑定属性的值，请使用@PublishedAttribute(reflect: true)。 reflect表示属性值反映在DOM中，否则它仅适用于Polymer和Dart代码。

之前我还没有看到此错误消息。也许聚合物初始化存在问题。你有自定义主菜吗？你能把它添加到你的问题中吗？

class MyA extends PolymerElement { @observable aobservable = 'obs'; @published apublished = 'pub'; @PublishedAttribute(reflect: true) areflected = 'ref'; }

<polymer-element name="my-a"> <template>  <my-b bpublished="{{aobservable}}"></my-b> <my-b breflected="{{aobservable}}"></my-b>  </template> </polymer-element> class MyB extends PolymerElement { @observable bobservable = 'obs'; @published bpublished = 'pub'; @PublishedAttribute(reflect: true) breflected = 'rep'; }

<polymer-element name="my-b"> <template> </template> </polymer-element>

<head> <style> // you can only address reflected attributes here my-a[areflected="ref"] { backgroundColor: red; } </style> </head> <body> <my-a></my-a> </body>

Answer 3

这似乎是解决方案。基于调试而不是知识，所以要小心..

假设您的组件foo.dart和foo.html引用了另一个组件bar.dart和bar.html。例如，引用可能是：

barEl el = document.querySelector('bar');

显然，import bar.dart位于foo.dart的顶部。除非您还

，否则会收到描述的错误

<link rel="import" href="bar.html">

位于foo.html的顶部。尽管bar.html中没有传统地引用foo.html。

将父自定义元素的数据绑定到子自定义元素的属性

3 个答案: