Javascript 关于聚合物最佳实践的几个问题

我正在构建我的第一个聚合物单页应用程序，我有几个问题

1） 在许多视图中，我需要显示一个对话框（各种确认等），我试图通过在父视图中创建一个对话框来集中对话框。对话框的内容通过熨斗页面切换。以下是parent中的代码：

<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>

然而，随着应用程序的发展，代码变得越来越混乱。您认为在子视图中导入图纸对话框并从中显示它们会更好吗

2） 我不确定在视图之间传递数据的最有效方法是什么。我有一个注册视图，其中包含铁页面。在iron页面中有step1、step2和step3视图。在最后一步中，我需要将数据保存到数据库中

我想我可以将数据保存在父视图中（例如，使用this.domHost.step1=data）并在最后一步中处理它们。或者最好是直接从一个视图到另一个视图传递数据，或者使用iron meta标记

3） 已解决：事件触发与直接函数调用

我想知道是否最好只调用父元素中的函数（例如调用this.domHost.showDialog（）），或者是否应该触发事件并在需要时捕获它

我认为从性能角度来看，直接函数调用会更好（没有事件冒泡），但代码似乎不那么清晰，事件触发的优点是我不需要将引用传递给DOM树中更深的子级

编辑： 我找到了第三个问题的答案。我本应该找得更好的

---

提前谢谢你，简

我倾向于做的是成对的元素。例如，我有一个

元素和一个

元素。我在

dom repeat

模板中使用

，因此该元素有许多副本，然后我在顶部找到了

周围的一些元素，因此只有一个

这些元素通过自定义事件相互通信，

元素在自身上调度一个

文件位置请求

冒泡事件。

在其

domHost

上侦听此事件，并将内部对话框

positionTarget

属性设置为事件的

event.path[0]

。在该事件中，需要用于填充对话框的任何数据都会出现

当对话框以肯定行动关闭时，我将在

位置target

处发送一个非冒泡事件，其中包含更新的数据

我确实需要一个锁来防止两个元素同时打开同一个对话框

我只在Polymer 1.0中测试过这一点，但是事件在两个方向上都穿透了阴影dom，没有问题——而且我对web组件v1.0规范的阅读似乎需要将

event.path[0]

更改为

event.composedPath（）[0]

，并确保阴影dom是“打开的”（无论如何都推荐）

---

通过将它们成对制作，我可以为每一对使用类似的设计模型，但在它们之间有自定义的数据传递

这些都是关于结构化和数据流的，可能会有所帮助：Rob Dodson的文章帮助我澄清了许多关于web组件开发的事情。谢谢你的回答

    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);

    },