2

dart-polymer パッケージを使用してカスタム要素を作成します。カスタム要素の読み込み中にページが点滅していることに気付きました。この効果は、非常に単純な ClickCounter アプリでも見られます。この厄介なまばたきを回避する方法はありますか?

この問題はウィキペディアhttp://en.wikipedia.org/wiki/Flash_of_unstyled_contentでよく説明されています

http://www.polymer-project.org/docs/polymer/styling.html#fouc-preventionから提案された解決策は、単純なアプリケーション (ポリマー: '0.10.0-pre.2') では機能しません。

<html>
  <head>
    <title>Click Counter</title>

    <!-- import the click-counter -->
    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="clickcounter.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
    <body unresolved>
    <h1>CC</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <click-counter count="5"></click-counter>
    </div>

  </body>
</html>

<polymer-element name="click-counter" attributes="count">
  <template>
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
    </div>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  @published int count = 0;

  ClickCounter.created() : super.created() {
  }

  void increment() {
    count++;
  }
}

code.google.com で作成された問題も参照してください https://code.google.com/p/dart/issues/detail?id=17498

4

1 に答える 1

1

Polymer 0.9.5
使用するクラス名はpolymer-veiled(非表示) とpolymer-unveil(公開遷移中) です。Polymer.js と異なる場合は変更される可能性がありますが、PolymerDart 0.9.0 では動作するはずです。

関連するコードは にありpackages/polymer/src/boot.dartます。

Polymer 0.10.0
Polymer 0.10.0-pre.1 は、unresolvedここで説明したような属性を既に使用しています
Polymer - Styling reference - FOUC 防止

pubspec.yaml次のような開発バージョンを取得するには、バージョン制約を追加する必要があります
polymer: ">=0.10.0-pre.1"

于 2014-03-15T10:06:43.770 に答える