关于 Polymer 最佳实践的几个问题

Question

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

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>

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

    },

但是，随着应用程序的发展，代码变得越来越混乱。您认为在子视图中导入 paper-dialog 并从那里显示它们会更好吗？

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

我在想我可以将数据保存在父视图中（例如通过使用 this.domHost.step1 = data）并在最后一步处理它们。或者直接在视图之间传递数据或者使用铁元标记会更好吗？

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

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

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

编辑： 我为第三个问题找到了answer。我应该搜索得更好。

提前致谢，杨

Answer 1

我倾向于做的是制作成对的元素。例如，我有一个 <file-location> 元素和一个 <file-location-dialog> 元素。我在dom-repeat 模板中使用<file-location>，所以这个元素有很多副本，然后我找到<file-location-dialog> 是顶部的一些周围元素，所以只有一个。

这些元素通过自定义事件相互通信，<file-location> 元素在其自身上调度 file-location-request 冒泡事件。 <file-location-dialog> 在其domHost 上侦听此事件，并将内部对话框positionTarget 属性设置为事件的event.path[0]。需要用于填充对话框的任何数据都包含在该事件中。

当对话框以肯定动作关闭时，我会在 positionTarget 发送一个非冒泡事件，并带有更新的数据。

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

我只用 Polymer 1.0 对此进行了测试，但事件在两个方向上都毫无问题地穿透了 shadow dom - 而且我对 web 组件 v1.0 规范的阅读似乎需要将 event.path[0] 更改为 event.composedPath()[0]并确保 shadow dom 是“开放的”（无论如何推荐）

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