【发布时间】：2015-02-05 18:26:38
【问题描述】：
我正在尝试观察嵌套 Dart PolymerElements 的属性变化。 它适用于 Firefox、Chrome，但不适用于 iPad 上的 Safari 8.0 (iOS 8.1.3)：
index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="import" href="parent_element.html">
</head>
<body unresolved fullbleed>
<parent-element></parent-element>
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
parent_element.html 文件：
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/core_elements/core_header_panel.html">
<link rel="import" href="packages/core_elements/core_toolbar.html">
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<link rel="import" href="packages/paper_elements/paper_button.html">
<link rel="import" href="child-element.html">
<polymer-element name="parent-element">
<template>
<style>
:host, core-header-panel {
height: 100%;
}
</style>
<core-header-panel mode="waterfall" flex>
<core-toolbar class="small">
<div>Observed value in parent is {{logged}}</div>
<span flex></span>
<div id="message"></div>
<child-element id="login-box" logged="{{logged}}"></child-element>
<paper-button on-click="{{doLogin}}" raised hidden?="{{logged}}">Login</paper-button>
<paper-button on-click="{{doLogout}}" raised hidden?="{{!logged}}">Logout</paper-button>
</core-toolbar>
</core-header-panel>
</template>
<script type="application/dart" src="parent-element.dart"></script>
</polymer-element>
parent-element.dart 文件：
@CustomTag('parent-element')
class ParentElement extends PolymerElement {
ChildElement childElement;
@observable bool logged = false;
ParentElement.created() : super.created() {
//while(children.length > 0) {
// shadowRoot.append(children[0]);
//}
childElement = (shadowRoot.querySelector('#login-box') as ChildElement);
}
void loggedChanged() {
print('loggedChanged: $logged');
}
void doLogin(Event e, var details, Node node) {
childElement.doLogin();
}
void doLogout(Event e, var details, Node node) {
childElement.doLogout();
}
}
child-element.html 文件：
<link rel="import" href="packages/polymer/polymer.html">
...
<polymer-element name="child-element">
<template>
<style>
</style>
<paper-action-dialog id="login-dialog" heading="Login to.." transition="core-transition-center" backdrop="" layered="true">
<p>Observed value in child is ({{ logged }})</p>
<paper-button affirmative>Cancel</paper-button>
<paper-button id="login-button" affirmative autofocus >Join</paper-button>
</paper-action-dialog>
</template>
<script type="application/dart" src="child-element.dart"></script>
</polymer-element>
child-element.dart 文件：
@CustomTag('child-element')
class ChildElement extends PolymerElement {
bool _loginListen = false;
@published bool logged;
ChildElement.created() : super.created() {
// I can't set onClick listen here because login-button doesn't exists yet. Why?
//var loginBtn = ($['login-button'] as PaperButton); ==> null
//var loginBtn1 = (querySelector('#login-button') as PaperButton); ==> null
}
void doLogin() {
if (!_loginListen) {
PaperButton button = (shadowRoot.querySelector('#login-button') as PaperButton);
button.onClick.listen((Event e) {
_login(e);
});
_loginListen = true;
}
PaperDialogBase dialog = (shadowRoot.querySelector('#login-dialog') as PaperDialogBase);
dialog.toggle();
}
void _login(Event event) {
print('Login...');
logged = true;
}
void doLogout() {
print('Logout...');
logged = false;
}
}
pubspec.yaml 文件：
name: test
version: 0.0.1
description: Test of observers
dependencies:
paper_elements: 0.6.1
polymer: ">=0.15.0 <0.16.0"
browser: 0.10.0
transformers:
- polymer:
entry_points: web/index.html
当我单击“JOIN”按钮（在子元素中）时，它会触发“loggedChanged”（在父元素中）并更改文本“父元素中的观察值”（但在 iPad 上的 Safari 中没有强>)。
请告知如何修复它。非常感谢。
附言我尝试使用“数据对象”而不是“布尔记录”：
class DataObject extends Observable {
@observable bool logged = false;
}
但我得到了同样的效果。
【问题讨论】：
-
不，我这里没有 main()，但我尝试了 void main() { initPolymer(); }
-
在我发表评论后，我在
index.html中看到了脚本标签，这已经很清楚了。
标签： dart dart-polymer observable