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

我正在建立我的第一个聚合物单页应用程序，我几乎没有问题。关于聚合物最佳实践的几个问题

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）我不确定在视图之间传递数据的最有效方式是什么。我有一个包含铁页的注册视图。在iron-pages中有一个step1，step2和step3视图。在最后一步，我需要将数据保存到数据库中。

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

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

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

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

编辑：我发现第三个问题的answer。我应该更好地搜索。

在此先感谢，1月

来源

2016-12-02 Jan Beneš

这些是如何组织和数据流，它可以帮助： http://robdodson.me/interoperable-custom-elements/ https://youtu.be/pAW4YDLtPVs?t=962 –

的罗布文章Dodson帮助我澄清了许多关于Web组件开发的事情。非常感谢您的回答 –

我一直倾向于做的是使成对的元素。例如，我有一个<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发送非冒泡事件。

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

我只用聚合物1.0测试了这个，但事件在两个方向上都没有问题地刺破阴影 - 我读了web组件v1。0规格看来，我可能需要更改event.path[0]以event.composedPath()[0]并确保阴影延迟性肌肉酸痛是“开放”（反正推荐）

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

来源

2016-12-02 16:26:28 akc42

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

回答

相关问题