Polymer：ダイアログを表示

私はPolymerのペーパーダイアログを使って外部イベントに応じてメッセージを表示しようとしていますが、単純なケースでも問題があります。私は 'this：$：undefined'というエラーが表示されています（下記のコードを参照）。Polymer：ダイアログを表示

<link rel="import" href="bower_components/polymer/polymer.html"> 
<link rel="import" href="bower_components/paper-dialog/paper-dialog.html"> 

<dom-module id="dialogtest-main"> 
    <template> 
     <paper-dialog id='goodbyeDialog' modal> 
      <p> Goodbye! </p> 
      <div class='buttons'> 
       <paper-button dialog-dismiss>Cancel</paper-button> 
      </div> 
     </paper-dialog> 

     <p align="center">Hello...</p> 
    </template> 
    <script> 
    doTimer = function() { 
     element.openDialog(); 
    } 

    element = { 
     is: "dialogtest-main", 
     ready: function() { 
      window.setTimeout(doTimer, 1000); 
      console.log("ready"); 
     }, 
     openDialog: function() { 
      console.log("opening dialog"); 
      this.$.goodbyeDialog.open(); 
     } 
    }; 
    Polymer(element); 
    </script> 
</dom-module>

私はopenDialogの機能にブレークポイントを配置し、コンソールで実行することにより、いくつかの必死のスタブを作っています

this.$

未定義

this.$.goodbyeDialog

はTypeError：この$未定義です。

element.$.goodbyeDialog

TypeError例外：要素$が未定義

document.getElementById("goodbyeDialog")

<紙ダイアログモーダル= "" ID = "goodbyeDialog" クラス= "スタイルスコープdialogtest-メインX-スコープ紙ダイアログ-0" ロール= "ダイアログです"tabindex =" - 1 "aria-hidden =" true "aria-modal =" true "style ="アウトライン：medium none;表示：なし; ">

document.getElementById("goodbyeDialog").open()

未定義

document.getElementById("goodbyeDialog").toggle()

未定義

任意のアイデア私が何か非常に単純な間違っているしなければならないと確信して

出典

2016-05-19 philr

でwindow.setTimeout(doTimer.bind(this), 1000);を置き換えることができます'？ –

JavaScriptのスコープを勉強し、特に[ライフサイクル]（https://www.polymer-project.org/1.0/docs/devguide/registering-elements#lifecycle-callbacks）の部分を読むことをお勧めします。それ以外の場合は、この種の問題が頻繁に発生します。 – Mason

@Mason、今後はこれを避けるためにもっと読書が必要です。先端に感謝します。 – philr

あなたは合格する必要がありますか？！ thisこのコンテキストではとelement.openDialogのコンテキストを使用します。paper-dialogはこのシナリオでは動作します。

window.setTimeoutではなく、this.openDialog()からreadyまたはattachedというイベントを直接使用することをお勧めします。タイムアウト後のpaper-dialogがthisにバインドされたコールバック関数を実行しますasyncを使用されるだろうオープンの

ポリマー方法。あなたが ``直接this.openDialogを（呼び出していない理由window.setTimeout`を、使用したいなぜあなたは添付 `ready`イベントや`いずれかから `）this.async(this.openDialog, 1000);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
    <title>Paperdialog-test</title> 
 
    
 
    <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script> 
 
    
 
    <base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/"> 
 
    
 
    <link rel="import" href="paper-dialog/paper-dialog.html"> 
 
    
 
</head> 
 
<body class="fullbleed"> 
 
    <dialogtest-main></dialogtest-main> 
 

 
<dom-module id="dialogtest-main"> 
 
    <template> 
 
     <paper-dialog id='goodbyeDialog' modal> 
 
      <p> Goodbye! </p> 
 
      <div class='buttons'> 
 
       <paper-button dialog-dismiss>Cancel</paper-button> 
 
      </div> 
 
     </paper-dialog> 
 

 
     <p align="center">Hello...</p> 
 
    </template> 
 
    <script> 
 
    doTimer = function() { 
 
     element.openDialog.call(this); 
 
    } 
 

 
    element = { 
 
     is: "dialogtest-main", 
 
     ready: function() { 
 
      window.setTimeout(doTimer.bind(this), 1000); 
 
      console.log("ready"); 
 
     }, 
 
     openDialog: function() { 
 
      console.log("opening dialog"); 
 
      this.$.goodbyeDialog.open(); 
 
     } 
 
    }; 
 
    Polymer(element); 
 
    </script> 
 
</dom-module> 
 
</body> 
 
</html>

出典

2016-05-19 09:49:42

'setTimeout'では、コールバックを取得するには' doTimer.bind（this） 'でなければなりません。 'doTimer.call（this）'はすぐに関数を呼び出します。 – tony19

'element.openDialog.call（this）'は 'this.openDialog（）'と同じです。 – tony19

@ tony19 'doTimer.call（これ）'が 'doTimer.bind（this）'に変更されました –

Polymer：ダイアログを表示

答えて

関連する問題