web-dev-qa-db-ja.com

ネストされたpolymer elements間のデータバインディング

2つの異なるpolymer-elementsがあるとします。

contentプレースホルダーを使用して、一方を他方の中に埋め込む必要があります。これら2つのネストされたpolymer-elements間でデータバインディングを実行することは可能ですか？

試しましたが、動作しません： http://jsbin.com/IVodePuS/11/

http://www.polymer-project.org/articles/communication.html#binding によると、polymer-elements間のデータバインディングは機能するはずです（これらの例では、templateを使用せずにcontentタグ内で実行されました。プレースホルダー）。

更新：

Scott Milesは、データバインディングはtemplateレベルでのみ機能することを明確にしました。
ただし、私の場合、正確なtemplateは事前にわかりませんが、parent-elementのユーザーが、どのchild-elementを含めるかを指定できるようにします（異なるchild-elementsがある場合）。
この質問はこれに関連していると思います： a Polymer element 内のlightdomで定義されたテンプレートを使用

私は彼を強調するために以下の例を更新しました：

<polymer-element name="parent-element" >
  <template >
    <div>Parent data: {{data1}} </div>
    <content />
  </template>
  <script>
    Polymer('parent-element', {
      data1 : '',
      ready: function() {
        this.data='parent content';
      }
    });

  </script>
</polymer-element>

<polymer-element name="child-element" attributes="data2">
   <template>
    <div>Parent data: {{data2}} </div>
  </template>
  <script>
    Polymer('child-element', {
      data2 : '',
      ready: function() {
      }
    });
  </script>
</polymer-element>

<polymer-element name="child2-element" attributes="data2">
   <template>
    <div>Parent data: {{data2}} </div>
  </template>
  <script>
    Polymer('child2-element', {
      data2 : '',
      ready: function() {
      }
    });
  </script>
</polymer-element>

ユーザーは、埋め込むchild-elementを選択できます。

<parent-element data1 = "test">
  <child-element data2="{{data1}}"/>
</parent-element>

<parent-element data1 ="test" >
  <child2-element data2="{{data1}}"/>
</parent-element>

回避策：

私が見つけた唯一の回避策は、change watcherを追加し、getDistributedNodes()を使用して子要素を取得し、手動でdata2をdataに設定することでした。

<polymer-element name="parent-element" >
  <template >
    <div>Parent data: {{data}} </div>
    <content id="content"/>
  </template>
  <script>
    Polymer('parent-element', {
      data : '',
      ready: function() {
        this.data='parent content';
      },
      dataChanged : function() {
          contents = this.$.content.getDistributedNodes();
          if (contents.length > 0) {
              contents[0].data2 = this.data;
          }
      },
    });

  </script>
</polymer-element>
data-bindingpolymerweb-componentshadow-dom
13
Ümit

ポリマーデータバインディングは、モデルをサブツリー全体にアタッチすることで機能します。

あなたが書いた：

<parent-element>
  <child-element data2="{{data}}"/>
</parent-element>

これは、parentNodeがバインディングモデルを提供するというルールを意味します。しかし今、あなたが書きたいと思ったと想像してください：

<parent-element>
  <div>
    <child-element data2="{{data}}"></child-element>
  </div>
</parent-element>

今、あなたは問題を抱えています。

代わりに、Polymerの例では、{{}}が（ほとんどの場合）テンプレート内にあることに気付くでしょう。たとえば、次のように定義すると、

<polymer-element name="Host-element" attributes="data" noscript>
<template>
  <parent-element data1="{{data}}">
    <child-element data2="{{data}}"></child-element>
  </parent-element>
</template>
</polymer-element>

これで、テンプレートによって記述されたサブツリー全体で物事をバインドするために使用できるモデルコンテキスト（Host-element）ができました。

これが機能するためにattributes="data"は必要ないことに注意してください。 Host-elementがdataを公開するように追加しました。これを行うには、次のようにします。

<Host-element data="test"></Host-element>

http://jsbin.com/IVodePuS/15/edit

6
Scott Miles

チャームのように機能します。親要素はプロパティデータを公開しており、双方向でデータをバインドできます。このようにして、子要素は同じデータを取得します。

<polymer-element name="custom-element">
<template>
    <parent data="{{data}}">
        <child data="{{data}}"></child>
    </parent>
</template>
<script>
    Polymer({
        ready: function() {

        },
        data: {}
    });
</script>
0
zdarsky.peter

Polymer> = 1.0では、これは " 自動バインドテンプレート "を使用して実行する必要があると思います。

0
T. Roggendorf