聚合物的设计问题

Question

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

Answer 1

有不同的范例可以解决这个问题。一种常见的范例是保持单向数据流（称为数据向下，动作向上），这对于像 React 这样的框架来说是惯用的。 Polymer 可以处理 two-way 绑定，所以你也可以这样处理。

我会

创建一个 parent 容器来容纳您的搜索和 table 元素。
跟踪在您的 parent 容器作为属性
有一个更新的方法当前项目属性接受一个代表用户选择的项目
将此方法作为属性传递到您的 table 分量
使用 iron-ajax 组件获取您的数据并将结果分配给您的项目参数使用另一个 iron-ajax 使用参数
附加一个 onClick 处理程序到你的 table 中的项目并让它调用你定义的方法更早并将该项目用作参数
当当前项目属性关于 parent 组件更新，这将触发 iron-ajax 用新项目重新获取搜索查询。当。。。的时候新数据出现时，它会自动将其向下传播到搜索组件，它应该会自动更新。

这是使用 higher-order-component 的数据 down/actions 向上范例的示例。在这种情况下，这是您的 parent 组件。它正在协调其他 2 个组件的 updating/flow。

我添加了一个 plunkr 所以你也可以看到一个聚合物的双向绑定的例子。这与上面的说明之间的主要区别在于，我们没有将任何方法从 parent 传递到 children 以供 children 调用。相反，我们使数据绑定成为 bi-directional，这意味着如果 child 更新向下传递的属性，更改将自动向上传播，而无需您进行干预。您通过使用花括号而不是方括号来使 prop 双重绑定，并在 child 的属性定义中，将 notify 属性设置为 true。

您选择哪种方式取决于您和您的团队。一些团队发现 2 向绑定很难推理，因为使用深层嵌套的组件可能很难发现谁更改了属性。在我看来，将一个动作传递给深层嵌套的组件也可能会造成混淆，所以我不一定反对双向绑定，它的名字也不好，因为它在其他框架中的早期实现存在性能问题，但根据我的经验，Polymer 是才不是。

Answer 2

你也可以利用事件传递数据，Trey的回答也是正确的，他的建议很贴切。您应该使用父组件来完成所有艰苦的工作。但是，如果您仍然希望按照目前的方式继续，我建议您使用事件来传递数据，

  handleIncomingData(e) {
    this.dispatchEvent(new CustomEvent('kick', {detail: {ajaxData: yourAjaxData}}));
  }

此代码段是从聚合物网站本身采用的，请确保您使用事件的详细信息属性传递数据。

参考这个link,

https://www.polymer-project.org/2.0/docs/devguide/events

聚合物的设计问题

A design issue with polymer

javascript

polymer