如何从聚合物组件访问父模型答案

【问题标题】：How to access parent model from polymer component如何从聚合物组件访问父模型
【发布时间】：2013-12-03 00:22:32
【问题描述】：

我将 my-app 作为 index.html 文件中的主要应用程序组件，并使用 model.dart 作为其模型，即我的应用程序模型。

my-app 以 my-component 作为其内容。当用户与我的组件交互时，我需要更新 model.dart 中的值。

<my-app>
   <my-component></my-component>
</my-app>

我认为的一种方法是访问 my-component dart 文件中的 my-app 并使用其模型属性访问 model.dart。

这是访问应用程序模型的正确方法吗？还有如何从我的组件中获取我的应用程序？

【问题讨论】：

标签： dart

【解决方案1】：

我认为让子组件了解其父组件并不是一个特别好的模式。

但是你是对的，子组件中发生的事情通常会改变父组件中的值，或者绑定到父组件的模型中的值。对于这样的情况，我发现孩子可以调度一个事件，而父母可以选择与该事件进行交互，因为它认为合适。

调度事件就像执行以下操作一样简单（这是class MyComponent）：

dispatchEvent(new CustomEvent('foo'));

父母可以像这样监听那个事件：

<my-app>
  <my-component on-foo="{{someMethodOnTheParent}}"></my-component>
</my-app>

实际上，孩子只是广播某事发生了，但无法控制父母如何（或什至）如何回应。如果 <my-component> 被不同的父级使用，则该父级可以选择以不同的方式响应自定义事件：

<another-element>
  <my-component on-foo="{{someOtherMethod}}"></my-component>
</another-element>

在 parent 中触发的回调几乎可以做任何事情，包括修改模型。

希望对您有所帮助。

【讨论】：

感谢您的回复。
我同意您对设计模式的评论，但有必要调用组件来做一些工作并将结果返回给调用者。我正在尝试构建病历系统，并且有用户用于搜索患者的患者搜索组件，并将结果返回到主应用程序。我使用了你的建议，但做了一些修改。
my-component 是动态创建的，因此我无法在 HTML 中注册事件处理程序。相反，我在 my-component 中定义了一个函数，该函数将函数作为参数，在 my-app 中，创建 my-component 后，我设置了在 my-component 中执行的函数。

【解决方案2】：

飞镖聚合物 >= 1.0.0-x 新的 PolymerDom(this).parentNode

飞镖聚合物

@ShailenTuli 关于封装不应该被破坏是正确的。

但 JS Polymer 元素也可以在其布局元素中访问父级，因为在某些情况下它仍然很方便。

这现在也适用于 PolymerDart。

(this.parentNode as ShadowRoot).host

【讨论】：