web-dev-qa-db-ja.com

Polymerグローバル変数

私はPolymerアプリに取り組んでいます。これは、RESTful APIからデータを取得し、それを使用してインターフェイスを構築しています。概念的に固執している特定の領域は、モノステートパターンの実装です。 http://www.polymer-project.org/docs/polymer/polymer.html#global で説明されています。事実上、宣言属性を新しいコンポーネントapp-globalsに追加して、アクセスすることができます。これはかなり簡単です。

重要な質問は次のとおりです。core-ajaxを介してapp-globalsコンポーネント内のAPIにデータをプル（および場合によっては再送信）する場合、app-globalsコンポーネントのすべてのコンシューマーが同じデータ？提案されたパターンを使用すると、モノスタティズムが失われたようです。

<polymer-element name="my-component">
  <template>
    <app-globals id="globals"></app-globals>
    <div id="firstname"></div>
    <div id="lastname"></div>
  </template>
  <script>
    Polymer('my-component', {
      ready: function() { this.globals = this.$.globals; }
     });
  </script>
</polymer-element>

app-globalsを消費する各コンポーネントは、独自のバージョンのAPIデータをプルするためです。私は何かが足りないのですか？アプリに常に真実のバージョンが1つしかないことを確認する別の方法はありますか？

javascriptpolymer
12
Greg Johnson

カスタムコンポーネントでapp-globalsを参照するたびに、app-globalsの新しいインスタンスが作成されます。ただし、これらの各インスタンスは、いくつかのプロパティを共有できます（Javaの「静的」変数またはObjC/Swiftの「クラス」変数を​​考えてください）。

App-globals要素（または実際には任意のPolymer要素）内のスクリプトは1回だけ実行されます-コンポーネント定義がロードされたときに実行されると考えてください。しかし、Polymer =そのスクリプト内の関数は、インスタンスごとに個別に作成されるプロパティとライフサイクルイベントハンドラーを使用して構成オブジェクトを宣言します。参照するドキュメント内のapp-globalsスクリプト（UPDATEの下にコピー：このバージョンは後で説明するように変更されます）共有変数と、共有変数を参照する構成オブジェクトを宣言するPolymer関数）の両方を含む匿名クロージャー（すぐに実行される関数）を使用します。したがって、その構成オブジェクトの各インスタンス-そして次にapp-globalsの各インスタンス-は同じ共有変数のセットを参照します。

 <polymer-element name="app-globals">
  <script>
  (function() {
    var data = {
      firstName: 'John',
      lastName: 'Smith'
    }

    Polymer('app-globals', {
       ready: function() {
         this.data = data;
       }
    });
  })();
  </script>
</polymer-element>

1つのカスタムコンポーネントインスタンスがそのapp-globalsインスタンスの値を変更した場合（または、AJAX呼び出しの結果として）内部で変更された場合） app-globalsを参照するallの他のコンポーネントインスタンスには、変更された値が表示されます。

更新：コピー元のオリジナル：

http://www.polymer-project.org/docs/polymer/polymer.html#global

@zreptilで説明されているように、データ値を変更すると、他のすべてのインスタンスで新しい値を使用できるわけではありません。インスタンス変数は参照された文字列の単なるコピーであるためです。上記の編集バージョンのように、データプロパティを持つオブジェクトを使用し、オブジェクト自体を上書きするのではなく、そのオブジェクトのデータプロパティから読み取り、データプロパティに割り当てるだけで、変更された値をインスタンス間で共有できます。

12
Tim Stewart

@Zreptilは上記の例を求めましたが、とにかくこれを実験する必要があったので、TimStewartの回答とPolymerドキュメント）に基づいて作成しました。

完全な例： http://jsbin.com/figizaxihe/1/edit?html,output

IDのダッシュで問題が発生しました（id="global-variable"）そのための例も追加しました。

要素の定義

<polymer-element name="app-globals">
<script>
  (function() {
    var data = {
      firstName: 'John'
    }

    Polymer({
       ready: function() {
         this.data = data;
       }
    });
  })();

</script>
</polymer-element>

a polymer element内で使用します

<polymer-element name="output-element" noscript>
<template>
    <app-globals id="globalvars"></app-globals>
    <h4>Output-Element</h4>
    <div>First Name: {{$.globalvars.data.firstName}}</div>
</template>
</polymer-element>

a polymer elementの外で使用してください

<template is="auto-binding">
    <app-globals id="topglobals"></app-globals>
    <h3>First Name in Title: {{$.topglobals.data.firstName}}</h3>
</template>

ダッシュ/ハイフンで注意を払う

  <h3>and since that took me a while to realize - dashes are not directly supported...</h3>
<template is="auto-binding">
    <!-- can use different id's -->
    <app-globals id="global-variables"></app-globals>
    <div>This does not work: {{$.global-variables.data.firstName}}</div>
    <div>Correct syntax: {{$['global-variables'].data.firstName}}</div>

</template>

ポリマー1.0

興味がある場合は、polymer 1.0ソリューションについては Polymer 1.0 Global Variables を参照してください。

5
ootwch