web-dev-qa-db-ja.com

polymer親要素を取得

Polymerを約1日使用していて、この質問の言い回しに問題があるので、私のアプローチがベースから外れている場合は、これを修正する必要を感じないでください、むしろ私を正しい方向に向けてください。

私が持っているのは、カスタム要素内のカスタム要素であり、子要素が親の属性に影響するようにしたいと思います。私が取っているアプローチは、クリックハンドラーを作成し、IIFEの親要素を閉じてから、そのハンドラーをサブコンポーネントに渡すことです。そのようです...

Polymer({
  ready: function(){
     this.superHandler = (function(p) {
        return function() {
          // "this" here will be the sub-component
          p.title = this.title;
        }
     })(this);
  }
});

親要素がテンプレートの中でそれを使用する場所...

<polymer-element name="parent-element">
  <template>
    <sub-element on-click={{superHandler}} />
  </template>
</polymer-element>

これ（私の実際のコードでは、タイプミスがある可能性があります）はIE以外のすべてで動作し、IEは公式にはサポートされていませんが、あまりにも近いので提供したくありません）私が避けたいことは、私が探している親に到達するために、parentNodesとshadowRootsへの参照を繰り返すことです。

編集

IEでどのように失敗するのか、なぜparentNode呼び出しを避けたいのかを説明するのを忘れていました。 IEでは、polymer.jsの9131行目のイベントをディスパッチする場合、変数「method」とobj [method]の参照はIEの文字列であるため、メソッドは適用されません。 parentNodeを避けたい理由は、呼び出し元が直接の親ではないため、正しい名前が見つかるまでparentNodesを取得し続けたくないためです。変数に名前を付けると、コードの理解が深まるためです。

編集2

私が今行っているのは（IE9で機能しているため）より良い答えを出すために質問を開いたままにすることですが、IIFEを続行して、子である引数を取る関数を返すことです。次に、子はquerySelectorによって対象の親を見つけます。これは、子が親と呼び出すメソッドの事前知識を持っている必要があることを意味しますが、これは理想的ではありませんが... IE。

だから親はそれを次のように設定します...

Polymer('parent-element', {
  ready: function(){
     this.superHandler = (function(p) {
        return function(child) {
          p.title = chile.title;
        }
     })(this);
  }
});

そして、子はクエリセレクター、たとえば 'parent-element'によってそれを取得し、 'superHandler'（実際の名前ではない）という名前を知っている必要があります。

Polymer('child-element',{
        clickHandler: function(){
            var p = document.querySelector('parent-element').superHandler;
            p(this);
        }
    });

より良いアイデア？

javascriptpolymer
15
Felix

カスタムイベントの提案をありがとう。これにより、コア要素をもう一度見て、 this を見つけることができました。

次に、追加する必要があります

<core-signals on-core-signal-my-event="{{myEventHandler}}"></core-signals>

（この例では）「my-event」という名前の「core-signal」イベントを発生させ、親にメソッド「myEventHandler」を作成します。

Polymer({
  myEventHandler: function(e,detail,sender) {...}
})
1
Felix

独自のイベントを使用して、要素間でデータを渡すことができます。

親コンポーネント：

<polymer-element name="parent-element">
  <template>
    <!-- ... -->
    <sub-element></sub-element>
  </template>
  <script>
  Polymer({
    ready: function() {
      this.addEventListener('eventFromChild', this.myAction);
    },
    myAction: function(event) {
      console.log(event.detail);
    },
  });
  </script>

子コンポーネント：

<polymer-element name="sub-element" attributes="foo bar">
  <template>
    <!-- ... -->
    <button on-click="{{passParams}}">Send</button>
  </template>
  <script>
  Polymer({
    ready: function() {
      this.foo = 'abc';
      this.bar = '123';
    },
    passParams: function() {
      this.fire('eventFromChild', { foo: this.foo, bar: this.bar });
    },
  });
</script>
16
Max Zuber

Javascriptで親要素にアクセスする簡単な方法を次に示します。これは 個人的な作業 で機能します（ポリマー0.5-コメントで述べたように、1.0では状況が異なります）。 IEではテストされていませんが、簡単な解決策のようです。

Polymer('sub-element', {
  ready: function(){
     this.parentNode;
  }
});
3
bdulac

コンポーネントの性質上、私はこの方法でparentNodeにアクセスするのをためらっています。スタイリングが必要な場合は、:Host() cssルールを使用して、スタイルなしで実行できます。私見、あなたが正当な理由がない限り親要素に手を差し伸べることは不気味に思われます。カスタムイベントやlocalStorageのような中間ストアを使用しないのはなぜですか？

ベストプラクティスに関する追加のヘルプについては、 "Webコンポーネントの「ゴールドスタンダード」チェックリスト" も確認してください。

0
Erik Isaksen