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

我正在构建我的第一个 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

解决方法

我倾向于做的是成对元素.例如,我有一个< file-location>元素和<文件位置对话框>元件.我正在使用< file-location>在dom-repeat模板中,所以有这个元素的许多副本,然后我找到< file-location-dialog>是顶部的一些周围元素,所以只有其中一个.

这些元素通过自定义事件彼此通信,<文件位置> element调度自身的文件位置请求冒泡事件. <文件位置对话框>在其domHost上侦听此事件,并将内部对话框positionTarget属性设置为事件的event.path [0].需要用于填充对话框的任何数据都会出现在该事件中.

当对话框以肯定的操作关闭时,我会在positionTarget中使用更新的数据发回非冒泡事件.

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

我只用polymer 1.0对它进行了测试,但事件在两个方向上都没有问题地刺穿阴影dom – 我读取web组件v1.0规范似乎我可能需要将event.path [0]更改为event.composedpath ()[0]并确保阴影doms“打开”(无论如何推荐)

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

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

解决方法

相关推荐