无法在Polymer.dart中观察Safari 8.0(iPad，iOS 8.1.3)中嵌套元素的属性

我正试图观察嵌套Dart PolymerElement的属性更改。它适用于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>

父元素.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();
  }
}

子元素.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>

子元素.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"（在父元素中）并更改文本"Observed value in parent"（，但在iPad上的Safari中则不然）。

请建议如何修理。非常感谢。

p.s.我试着用"dataobject"而不是"bool-loged"：

class DataObject extends Observable {
  @observable bool logged = false;
}

但我得到了同样的效果。

您应该避免访问元素构造函数中的DOM

childElement = (shadowRoot.querySelector('#login-box') as ChildElement);

应该将此代码移到一个生命周期方法中，如ready（与child-element中注释掉的代码相同）。

我不知道这是否真的解决了你的问题，但这是你问题中唯一看起来不对的部分。

我创建了一个错误报告https://code.google.com/p/dart/issues/detail?id=22275以及测试样品。

UPD：这种影响是由于纸张操作对话框中的纸张按钮上存在肯定或否定属性。如果没有它们，父元素会观察到子元素中属性的变化。我已经将纸质操作对话框替换为纸张对话框

相关内容

最新更新

热门标签：