什么时候shadowRoot可用于聚合物组件？ [英] When is shadowRoot available to a polymer component?

问题描述

我无法理解访问组件的shadowRoot是否可用。下面是一组嵌套组件的图片：

2. NumWithUnitsInput - 输入组件
带有标签的输入组件

3. 付费时间表：具有相应标签的组件


4. DateInput：带有开始日期标签的组件

我已经通过日志消息打印shadowRoot（ sr => ... ）来检测创建和附加的方法，我得到以下结果：

  mortgageDetails [FINE]：MortgageDetails created sr => null（：1）
 moneyInput [FINE]：MoneyInput created sr => null（：1）
 numWithUnitsInput [FINE]：NumWithUnitsInput created sr => null（：1）
 rateInput [FINE]：RateInput created sr => null（：1）
 paymentSchedule [FINE]：PaymentSchedule created sr => null（：1）
 dateInput [FINE]：DateInput created sr => null（：1）
 mortgageDetails [FINE]：MortgageDetails attached with sr => 'ShadowRoot'的实例（：1）
  

日志记录是有意义的。组件以合理的顺序创建，然后开始附加。问题是，抵押细节是附在其含有的moneyInput之前。如果我在 MortgageDetails.attached 中添加一个日志语句，我可以看到它包含的MoneyInput对象有一个shadowRoot：

  mortgageDetails [FINE]：Composed moneyInput sr => 'ShadowRoot'的实例（：1）
  

这是一个问题， 。我需要一些初始化事件在MoneyInput组件到达到shadowRoot和附加一些处理程序。我无法使用创建的，因为shadowRoot甚至还没有设置。我正在尝试使用附件。我目前在MoneyInput的 attach 中有这样的代码：

  _amountElement = shadowRoot.querySelector ＃money-amount'）
 ..onBlur.listen（（evt）=> reformatAmount（））
 ..onFocus.listen（（evt）=> reformatAmount（））
 ..onKeyUp.listen（（evt）{if（evt.which == 13）reformatAmount（）;}）; 
 

由于MortgageDetails已附加并且MoneyInput尚未附加，MortgageDetails的实例无法使用包含MoneyInput，因为它没有完全初始化。例如，在MortgageDetails中激活我有：

 （mortgageAmountInput = $ [mortgage-amount ] as MoneyInput）
 ..label = r$ Amount of Loan
 ..onBlur.listen（（_）=> recalc（））
 ..onFocus.listen（ _）=> recalc（））; 
  

这会失败，因为MoneyInput的 activate 我想我真正需要的是一个事件，说shadowRoot已经设置，然后在那个事件我可以做我的初始化。

我在生命周期的聚合物元素？

解决方案

通常，如果你扩展 PolymerElement 主回调的顺序将为 ready ，创建，附加。这些发生自上而下：它们在祖先之前被称为后代。可能会混淆，准备被首先调用，但是因为 PolymerElement.created 在设置DOM后调用它，甚至处理程序，并且因为在您的类创建构造函数之前发生的构造函数排序。

Polymer还添加了一个 domReady 方法，您可以覆盖当您的元素的子元素被保证已创建时被调用的方法。这可能是你需要的。

请参阅 http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods 了解生命周期方法的详细信息。

首先，我会看看是否可以回避数据绑定和声明性事件的排序问题。

I'm having trouble understanding when access to the shadowRoot of a component is available. Here is an image of a set of nested components:

So there are a handful of components:

1. MortgageDetails: Component binding together a group of 3 other components
2. MoneyInput - Input component with Amount label
3. NumWithUnitsInput - Input component with Term label
4. RateInput - Input component with Rate label
5. PaymentSchedule: Component with corresponding label
6. DateInput: Component with Start Date label

I've instrumented the created and attached methods with log message printing the shadowRoot ( sr => ...) and I get the following:

mortgageDetails [FINE]: MortgageDetails created sr => null (:1)
moneyInput [FINE]:  MoneyInput created sr => null (:1)
numWithUnitsInput [FINE]:   NumWithUnitsInput created sr => null (:1)
rateInput [FINE]:   RateInput created sr => null (:1)
paymentSchedule [FINE]: PaymentSchedule created sr => null (:1)
dateInput [FINE]:   DateInput created sr => null (:1)
mortgageDetails [FINE]: MortgageDetails attached with sr => Instance of 'ShadowRoot' (:1)

The logging makes sense. Components are created in a reasonable order and then the attaching starts. The problem is though, the mortgage details is attached before its contained moneyInput is attached. If I add one more log statement in the MortgageDetails.attached I can see that its contained MoneyInput object has a shadowRoot:

mortgageDetails [FINE]: Composed moneyInput sr => Instance of 'ShadowRoot' (:1)

This is a problem for the way I'm doing things. I need some initialization event in the MoneyInput component to reach into the shadowRoot and attach some handlers. I can't use created because shadowRoot is not even set yet. I'm trying to use attached. I have code like this currently in the attach of MoneyInput:

  _amountElement = shadowRoot.querySelector('#money-amount')
    ..onBlur.listen((evt) => reformatAmount())
    ..onFocus.listen((evt) => reformatAmount())
    ..onKeyUp.listen((evt) { if(evt.which == 13) reformatAmount(); });

Since MortgageDetails is being attached and MoneyInput has not yet been attached, an instance of MortgageDetails can not use the contained MoneyInput as it would like as it is not fully initialized. For example, in MortgageDetails activate I have:

(mortgageAmountInput = $["mortgage-amount"] as MoneyInput)
  ..label = r" $ Amount of Loan"
  ..onBlur.listen((_) => recalc())
  ..onFocus.listen((_) => recalc());

This fails because MoneyInput's activate has not been called. I think what I really need is an event that says the shadowRoot has been set, then on that event I could do my initialization.

What am I missing on the lifecycle of polymer elements?

解决方案

Typically, if you're extending PolymerElement the order of the main callbacks will be ready, created, attached. These happen top-down: they're called on ancestors before descendants. It might confusing that ready is called first, but it's because PolymerElement.created calls it after setting up the DOM and even handlers, and because of constructor ordering that happens before your classes created constructor.

Polymer also adds a domReady method that you can override which is called when your element's children are guaranteed to have been created. That might be what you need.

See http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods for details on the lifecycle methods.

First I would see if you can sidestep the ordering issue with data-binding and declarative events, though.

这篇关于什么时候shadowRoot可用于聚合物组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！