设计/调试聚合物中的复杂数据绑定图

时间:2016-10-18 18:43:43

标签: polymer

据我所知,Polymer上的大部分谈话和资源都涉及相当简单的数据绑定案例。

然而,Polymer是一个功能强大的工具,原则上可用于构建IDE,WYSIWYG编辑器甚至简单游戏等内容;只要页面上的元素总数保持相当小(当然<1000,但理想情况下<100)。

然而,在这些示例中,数据绑定图可能变得非常复杂,单个事件(例如鼠标单击)的结果可以以难以理解的方式在绑定图周围传播/回响。

所以,问题是,首先是有任何资源(视频/博客等)讨论这些类型的复杂场景的最佳实践等;两个是否有机会生成一个生成绑定图的图形表示的工具。理想情况下,这样的图形可以在页面中呈现,叠加在元素本身上。实际上,人们可以想象有一个“记录”功能,即跟踪事件期间的数据传播并生成一个GIF,显示数据在图表中移动。

对于SO来说这可能不是一个理想的问题,但它在github上似乎也不是一个问题。

1 个答案:

答案 0 :(得分:1)

这就是为什么你应该为复杂的应用程序使用redux这样的外部状态管理框架的原因。 您可以使用polymer-redux行为,这是一种允许您与redux进行互动的简单行为。

您基本上在Presentational and Container Components中拆分了组件。表示聚合物组分是您的叶子组件,不知道redux并且只接收数据并发出事件。容器组件实现针对状态更改的redux行为和调度操作,并将数据传递给其子项(通常是表示组件)。

状态存储在全局,所有状态修改都发生在您可以轻松进行单元测试的Reducer中。优点是您可以使用redux-devtools执行time travel debugging并可视化您的state as a graph