Question

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

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）已解决：事件触发与直接函数调用。

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

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

编辑：我找到了第3个问题answer。我应该更好地搜索。

提前致谢，Jan

Answer 1

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

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

当对话框以肯定的行动结束时，我会在positionTarget发回一个非冒泡的事件，并附上更新的数据。

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

我只使用Polymer 1.0对此进行了测试，但事件在两个方向上都没有问题地刺穿阴影dom - 我对web组件v1.0规范的阅读似乎我可能需要将event.path[0]更改为{ {1}}并确保阴影dom＆＃34;打开＆＃34; （无论如何推荐）

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

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

1 个答案: