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

Question

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

1) 在许多 View 中，我需要显示一个对话框(各种确认等)，我试图通过在父 View 中创建一个对话框来集中对话框。对话框的内容由铁页切换。这是父级中的代码:

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

    },

然而，随着应用程序的增长，代码变得越来越困惑。你认为在 subview 中导入纸质对话框并从那里显示它们会更好吗？

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

我想我可以将数据保存在父 View 中(例如通过使用 this.domHost.step1 = data)并在最后一步处理它们。或者将数据直接从一个 View 传递到另一个 View 或者使用 iron-meta 标签会更好吗？

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

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

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

编辑: 我找到了一个 answer对于第三个问题。我应该搜索得更好。

提前致谢，简

Answer 1

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

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

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

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

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

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