ポリマーのベストプラクティスに関するご質問はありません

Question

私は最初のポリマーのシングルページアプリを沸かせています。

1）多くのビューでは、ダイアログ（さまざまな確認など）を表示する必要があり、親にダイアログを作成してダイアログを集中化しようとしました。ダイアログの内容は、鉄ページによって切り替わります。

<paper-dialog id="main_dialog" with-backdrop entry-animation="scale-up-animation" 
       exit-animation="fade-out-animation"> 
    <iron-pages id="dialogpages" selected="login" attr-for-selected="name"> 
     <login-view name="login"></login-view> 
     <registration-view name="registration"></registration-view> 
     <emaildialog-view name="emaildialog"></emaildialog-view> 
     <actionerror-view name="actionerror"></actionerror-view> 
     <actionconfirm-view name="actionconfirm"></actionconfirm-view> 
     <passreset-view name="passreset"></passreset-view> 
     <emailinput-view name="emailinput"></emailinput-view> 
    </iron-pages> 
</paper-dialog> 

とJavaScript：ここでは、親のコードは次のようになりますアプリの成長に合わせて

showDialog: function (path, pageName, open) { 
     this.$.dialogpages.selected = pageName; 
     this.importHref("/views/dialog_views/" + path + pageName + "-view.html", function() { 
      if (open) { 
       this.$.main_dialog.toggle(); 
      } 
     }.bind(this), null, true); 

    }, 

しかしコードが乱雑になっています。紙のダイアログをサブビューでインポートし、そこから表示する方が良いと思いますか？

2）ビュー間でデータを渡す最も効果的な方法は何か分かりません。私は鉄ページを含む登録ビューを持っています。鉄ページにはstep1、step2、step3のビューがあります。最後のステップでは、データをデータベースに保存する必要があります。

親ビュー（たとえばthis.domHost.step1 = dataを使用して）でデータを保存し、最後のステップでデータを処理できると考えていました。または、データを直接ビューからビューに渡すか、iron-metaタグを使用する方が良いでしょうか？

3）SOLVED：イベントの発生とダイレクト関数呼び出し。

親要素の関数を（たとえばthis.domHost.showDialog（）を呼び出すなどして）呼び出す方が良いか、必要なときにイベントを発生させて捕捉する必要があるのだろうかと思います。

私は、パフォーマンスの観点からは、直接関数呼び出しが優れている（イベントバブリングなし）が、コードはあまり明確ではないようだが、イベントの発生の利点は、 DOMツリーで深い子どもたち。

編集： 3番目の質問でanswerが見つかりました。私はよりよく捜索すべきだった。

ありがとうございます。Jan

Answer 1

私がしたかったのは、要素のペアを作ることでした。たとえば、私は<file-location>要素と<file-location-dialog>要素を持っています。私は<file-location>をdom-repeatのテンプレートに使用していますので、この要素のコピーがたくさんあります。そして、<file-location-dialog>は上部にいくつかの周囲の要素があるので、そのうちの1つしかありません。

これらの要素は、カスタムイベントを介して互いに通信し、<file-location>要素は、file-location-requestバブリングイベントをそれ自身にディスパッチします。 <file-location-dialog>はこのイベントをそのdomHostでリッスンし、内部ダイアログボックスpositionTargetプロパティをイベントのevent.path[0]に設定します。ダイアログに入力するために使用する必要があるデータはすべてそのイベントに入ります。

肯定的な操作でダイアログが閉じると、私は、バブリングしていないイベントを更新したデータでpositionTargetに返します。

2つの要素が同じダイアログを同時に開くのを防ぐには、ロックが必要です。

これはPolymer 1.0でしかテストされていませんが、イベントはシャドードームを両方向で問題なく突き刺すことができ、ウェブコンポーネントv1を読むことができます。0スペックはevent.path[0]をevent.composedPath()[0]に変更し、シャドードームが「オープン」であることを確認してください（とにかくお勧めします）

ペアで作成することで、各ペアに同様のデザインモデルを使用できますが、それらの間を通過する。