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

Question

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

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

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

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

这是访问应用程序模型的正确方法吗？另外如何从my-component中获取my-app？

Answer 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>

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

希望有所帮助。

Answer 2

Dart聚合物＆gt; = 1.0.0-x 新的PolymerDom（this）.parentNode

另见https://www.polymer-project.org/1.0/docs/devguide/local-dom.html

Dart Polymer＆lt; = 0.16.x

@ShailenTuli关于封装不应该被打破。

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

现在也可以在PolymerDart中使用。

(this.parentNode as ShadowRoot).host