javascript - polymer 的设计问题

Question

我是 polymer 新手。目前我陷入了一个不知道如何解决的步骤。假设我有一个 index.html，其中使用了两个组件: <table></table>和<search></search> 。该表使用参数items保存表的内容。和<search></search>基本上是根据一些搜索条件从数据库中搜索。现在如何更新item <search></search> 内部的参数元素。我希望我已经说清楚了。如果没有，那么请问我。谢谢

Answer 1

您可以采用不同的范式来解决这个问题。一种常见的范例是保持单向数据流(称为数据向下，操作向上)，这对于 React 等框架来说是惯用的。 Polymer 可以处理双向绑定(bind)，因此您也可以这样处理。

我愿意

1. 创建一个父容器来容纳您的搜索和表格元素。
2. 跟踪在以下位置搜索的当前项目 您的父容器作为属性
3. 有一个更新的方法 当前项目属性，它接受一个代表当前项目的参数 用户选择的项目
4. 将此方法作为属性传递到您的 表格组件
5. 使用iron-ajax组件来获取您的数据并 将结果分配给您的 items 参数 使用另一个 iron-ajax 使用参数接收您的搜索网址
6. 附加 onClick 处理程序 到表中的项目并让它调用您定义的方法 早些时候并使用该项目作为参数
7. 当当前项目 父组件上的属性更新，这将触发 iron-ajax 使用新项目重新获取搜索查询。当。。。的时候 新数据出现时，它会自动将其传播到 搜索组件，它应该自动更新。

这是使用高阶组件的数据向下/操作向上范例的示例。在本例中，这是您的父组件。它正在协调其他两个组件的更新/流程。

我添加了plunkr因此您还可以看到 polymer 双向结合的示例。这与上面的说明之间的主要区别在于，我们没有将任何方法从父级传递给子级以供子级调用。相反，我们启用数据绑定(bind)是双向的，这意味着如果子级更新传递的属性，更改将自动向上传播，而无需您干预。您可以使用大括号而不是中括号来创建 prop 双绑定(bind)，并在子项的属性定义中将 notify 属性设置为 true。

您选择走哪条路取决于您和您的团队。一些团队发现双向绑定(bind)很难推理，因为深度嵌套的组件可能很难发现谁更改了属性。在我看来，将操作传递给深度嵌套的组件也可能会令人困惑，所以我不一定反对 2 向绑定(bind)，这也有一个坏名声，因为它在其他框架中的早期实现存在性能问题，但根据我的经验，Polymer 是这样的才不是。