从父自定义元素到子自定义元素属性的 Dart 数据绑定
Dart data binding from a parent custom element to attributes of a child custom element
这是我今天更新到最新的 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
编辑
<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>
原创
- 如果你从一个元素的阴影 DOM 绑定到它的 class
@observable 就足够了。
- 如果您想从元素外部绑定到属性，请使用
@published。
- 如果您想在 CSS 选择器中使用绑定属性的值，请使用
@PublishedAttribute(reflect: true)。 reflect 表示属性值反映到 DOM，否则它仅适用于 Polymer 和 Dart 代码。
我以前从未见过此错误消息。可能Polymer初始化有问题。你有定制的主要吗？你能把它添加到你的问题中吗？
class MyA extends PolymerElement {
@observable
aobservable = 'obs';
@published
apublished = 'pub';
@PublishedAttribute(reflect: true)
areflected = 'ref';
}
<polymer-element name="my-a">
<template>
<!-- doesn't work
<my-b bobservable="{{aobservable}}"></my-b> -->
<my-b bpublished="{{aobservable}}"></my-b>
<my-b breflected="{{aobservable}}"></my-b>
<!-- you can bind properties of MyA here no matter if
they are observable/published/reflected
(even when they have no annotation but they will not
be updated when the value changes)
You can bind only to published (reflected or not)
attributes of MyB
-->
</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>
这个错误几乎总是因为元素以错误的顺序注册而发生。具体来说，父元素在子元素之前注册。
如果没有对代码的完全访问权限，这很难诊断，但遵循这两条规则应该可以确保这不是问题：
- 将每个聚合物元素放入其自己的 html 文件中，并将每个 class 放入其自己的 dart 库中（使用部件尤其会导致问题）。
- 确保您的元素导入所有依赖项。
这似乎是解决方案。基于调试而不是知识，所以要小心..
假设您的组件 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.
中没有按惯例引用
这是我今天更新到最新的 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
编辑
<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>
原创
- 如果你从一个元素的阴影 DOM 绑定到它的 class
@observable就足够了。 - 如果您想从元素外部绑定到属性，请使用
@published。 - 如果您想在 CSS 选择器中使用绑定属性的值，请使用
@PublishedAttribute(reflect: true)。reflect表示属性值反映到 DOM，否则它仅适用于 Polymer 和 Dart 代码。
我以前从未见过此错误消息。可能Polymer初始化有问题。你有定制的主要吗？你能把它添加到你的问题中吗？
class MyA extends PolymerElement {
@observable
aobservable = 'obs';
@published
apublished = 'pub';
@PublishedAttribute(reflect: true)
areflected = 'ref';
}
<polymer-element name="my-a">
<template>
<!-- doesn't work
<my-b bobservable="{{aobservable}}"></my-b> -->
<my-b bpublished="{{aobservable}}"></my-b>
<my-b breflected="{{aobservable}}"></my-b>
<!-- you can bind properties of MyA here no matter if
they are observable/published/reflected
(even when they have no annotation but they will not
be updated when the value changes)
You can bind only to published (reflected or not)
attributes of MyB
-->
</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>
这个错误几乎总是因为元素以错误的顺序注册而发生。具体来说，父元素在子元素之前注册。
如果没有对代码的完全访问权限，这很难诊断，但遵循这两条规则应该可以确保这不是问题：
- 将每个聚合物元素放入其自己的 html 文件中，并将每个 class 放入其自己的 dart 库中（使用部件尤其会导致问题）。
- 确保您的元素导入所有依赖项。
这似乎是解决方案。基于调试而不是知识，所以要小心..
假设您的组件 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.