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标记会更好吗?
我想知道在父元素中调用函数是否更好(例如通过调用this.domHost.showDialog())或者是否应该触发事件并在需要时捕获它.
我认为从性能角度看,直接函数调用会更好(没有事件冒泡)但代码似乎不那么明确,事件触发的优点是我不需要将引用传递给更深入的子代DOM树.
先谢谢,Jan
解决方法
这些元素通过自定义事件彼此通信,<文件位置> element调度自身的文件位置请求冒泡事件. <文件位置对话框>在其domHost上侦听此事件,并将内部对话框positionTarget属性设置为事件的event.path [0].需要用于填充对话框的任何数据都会出现在该事件中.
当对话框以肯定的操作关闭时,我会在positionTarget中使用更新的数据发回非冒泡事件.
我只用polymer 1.0对它进行了测试,但事件在两个方向上都没有问题地刺穿阴影dom – 我读取web组件v1.0规范似乎我可能需要将event.path [0]更改为event.composedpath ()[0]并确保阴影doms“打开”(无论如何推荐)
通过成对出现,我可以为每对使用类似的设计模型,但在它们之间传递自定义数据.