どのように彼らは、このようなコードを持つポリマーダイアログのデモでは、ポリマーボタンとダイアログ

Question

を分離するために：私は、ボタンをラップ（または私の場合にはFAB）したい

<script src= 
 
https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents.js> 
 
<link rel="import" href="https://github.com/Polymer/polymer/blob/master/polymer.html"> 
 

 
<link rel="import" href="https://github.com/PolymerElements/paper-button/blob/master/paper-button.html"> 
 
<link rel="import" href="https://github.com/PolymerElements/paper-dialog/blob/master/paper-dialog.html"> 
 

 
<section onclick="clickHandler(event)"> 
 
    <h4>Transitions</h4> 
 
    <paper-button data-dialog="animated">transitions</paper-button> 
 
    <paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop> 
 
    <h2>Dialog Title</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </paper-dialog> 
 
</section> 
 

 
<script> 
 
    function clickHandler(e) { 
 
    var button = e.target; 
 
    while (!button.hasAttribute('data-dialog') && button !== document.body) { 
 
     button = button.parentElement; 
 
    } 
 

 
    if (!button.hasAttribute('data-dialog')) { 
 
     return; 
 
    } 
 

 
    var id = button.getAttribute('data-dialog'); 
 
    var dialog = document.getElementById(id); 
 
    if (dialog) { 
 
     dialog.open(); 
 
    } 
 
    } 
 
</script>

とダイアログ私自身の別個のWebコンポーネントに変換します。動作するように、次の

<paper-fab class="addbutton" icon="add" onclick="clickHandler(event)"></paper-fab> 
 

 
</template> 
 
<script> 
 
    Polymer({ 
 
    is: 'my-dialog-button', 
 
    properties: { 
 

 
     dialog_id: { 
 
     type: String 
 
     }, 
 

 
    } 
 
    }) 
 

 

 
    function clickHandler(e) { 
 

 
    var button = e.target; 
 
    while (!button.hasAttribute('dialog_id') && button !== document.body) { 
 
     button = button.parentElement; 
 
    } 
 

 
    if (!button.hasAttribute('dialog_id')) { 
 
     console.log("you have no element with 'dialog_id' defined") 
 
     return; 
 
    } 
 

 

 
    var id = button.getAttribute('dialog_id'); 
 
    console.log("dialog " + id + " requested") 
 
    var dialog = document.getElementById(id); 
 
    if (dialog) { 
 

 
     dialog.open(); 
 
    } else { 
 
     console.log("dialog " + id + " does not exist") 
 
    } 
 
    } 
 
</script>

私ができます：

<thor-dialog-button dialog_id="add-button"></thor-dialog-button> 
 
<paper-dialog id="add-button"> 
 
    <h2>"Hello"</h2> 
 
    <p>"World"</p> 
 
</paper-dialog>

私はボタンやイベントをラップしようとしたダイアログのボタンを作成しました

しかし、自分のコンポーネントにダイアログをラップすると、その "id"はそのDOMコンテキストでは使用できなくなります。それで、うまくいきません。

私はIDのアプローチdoesntのは本当に仕事を考えていたと私は「onclickの」ボタンに「オープン」ダイアログをバインドする必要がありますが、私はそれを行う方法を見当がつかない、私が発見した：

https://www.polymer-project.org/1.0/docs/devguide/templates.html

を

しかし、これをラップされた要素にどのように適用するかはわかりません（少なくとも私はこれまでのアプローチでは驚異的に失敗しました）。

要約すると、2つのラップされたWebコンポーネントを分離する正しい方法は何ですか？

Answer 1

my-dialog-buttonとmy-dialogの2つの要素が必要です。あなたのボタンの要素は、いくつかの再作業が必要です。 Polymer({ })ブロック内でclickHandler関数を移動する必要があります。 on-clickの代わりにon-tapイベントを使用することもお勧めします。 on-tapは、デスクトップとモバイルでより一貫性のあるエクスペリエンスを実現します。

<script> 
Polymer({ 
    is: 'my-dialog-button', 
    properties: { 

    dialogId: { 
     type: String 
    } 
    }, 

    clickHandler: function (e) { 
    var button = e.target; 
    while (!button.hasAttribute('dialogId') && button !== document.body) { 
     button = button.parentElement; 
    } 

    if (!button.hasAttribute('dialogId')) { 
     console.log("you have no element with 'dialogId' defined"); 
     return; 
    } 


    var id = button.getAttribute('dialogId'); 
    console.log("dialog " + id + " requested"); 
    var dialog = document.getElementById(id); 
    if (dialog) { 

     dialog.open(); 
    } 
    else 
    { 
     console.log("dialog " + id + " does not exist") 
    } 
    } 
}); 

このようにしてください。ポリマーの主なものの1つは、Polymer({ })ブロック内のすべてのJavaScriptを保持することです。そうすれば、ポリマーの利点をすべて利用できるようになり、この問題のようなスコープの問題に陥ることはありません。

ダイアログを別の要素に折り返しても問題は解決しません。エレメントの有効範囲のため、dialog.open()メソッドにアクセスできなくなりました。 dialog.open()は、my-dialog要素内でのみアクセスできます。これを解決するには、独自の.open()メソッドを実装する必要があります。コードは次のようになります。

<template> 
    <paper-dialog id="dialog"> 
    //Your dialog content 
    </paper-dialog> 
</template> 

<script> 
    Polymer({ 
    is: 'my-dialog', 

    open: function(){ 
     this.$.dialog.open(); 
    } 
    }); 
</script> 

使用するインデックスやその他の要素でどのように見えるか。

あなたが my-dialog要素内のダイアログを開くことができる方法

<my-dialog-button dialog-id="testdialog"></my-dialog-button> 
<my-dialog id="testdialog"></my-dialog> 

。

の作業例：

<!doctype html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <!---- > 
 
    <base href="https://polygit.org/components/"> 
 
    Toggle below/above as backup when server is down 
 
    <!----> 
 
    <base href="https://polygit2.appspot.com/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
    <link href="paper-fab/paper-fab.html" rel="import"> 
 
    <link href="paper-dialog/paper-dialog.html" rel="import"> 
 
</head> 
 

 
<body> 
 

 
    <dom-module id="my-dialog-button"> 
 

 
    <style> 
 
     paper-fab.addbutton { 
 
     position: absolute; 
 
     right: -27px; 
 
     top: 34px; 
 
     } 
 
    </style> 
 
    <template> 
 
     <paper-fab class="addbutton" icon="add" on-tap="clickHandler"></paper-fab> 
 
    </template> 
 
    <script> 
 
     Polymer({ 
 
     is: 'my-dialog-button', 
 
     properties: { 
 

 
      dialogId: { 
 
      type: String 
 
      } 
 
     }, 
 

 
     clickHandler: function(e) { 
 
      var button = e.target; 
 
      while (!button.hasAttribute('dialogId') && button !== document.body) { 
 
      button = button.parentElement; 
 
      } 
 

 
      if (!button.hasAttribute('dialogId')) { 
 
      console.log("you have no element with 'dialogId' defined"); 
 
      return; 
 
      } 
 

 

 
      var id = button.getAttribute('dialogId'); 
 
      console.log("dialog " + id + " requested"); 
 
      var dialog = document.getElementById(id); 
 
      if (dialog) { 
 

 
      dialog.open(); 
 
      } else { 
 
      console.log("dialog " + id + " does not exist") 
 
      } 
 
     } 
 
     }); 
 
    </script> 
 

 
    </dom-module> 
 

 
    <!--- ---------------------------------------------my dialog------------------------------------------------> 
 

 

 
    <dom-module id="my-dialog"> 
 

 
    <template> 
 
     <paper-dialog id="dialog"> 
 
     <h2>"hello world"</h2> 
 
     <p>"I am bob"</p> 
 
     </paper-dialog> 
 
    </template> 
 

 
    <script> 
 
     Polymer({ 
 
     is: 'my-dialog', 
 

 
     open: function() { 
 
      this.$.dialog.open(); 
 
     } 
 
     }); 
 
    </script> 
 

 

 
    </dom-module> 
 

 
    <!-----------------------------page---------------------------------------> 
 
    <my-dialog-button dialogId="add-button"></my-dialog-button> 
 
    <my-dialog id="add-button"></my-dialog> 
 

 

 
</body>

---

サイドノート：

ポリマー要素を記述する場合は、あなたがPolymer({ });外のJavaScriptコードを宣言する必要はありません。そのブロックの外側にコードを宣言すると、プロジェクト内のスコープが乱れる可能性があります。