dart - 什么时候 shadowRoot 可用于聚合物组件？

Question

我无法理解何时可以访问组件的 shadowRoot。这是一组嵌套组件的图像:

所以有一些组件:

1. MortgageDetails:将一组 3 个其他组件绑定(bind)在一起的组件
2. MoneyInput - 带有Amount标签的输入组件
3. NumWithUnitsInput - 带有Term标签的输入组件
4. RateInput - 带有Rate标签的输入组件
5. PaymentSchedule:具有相应标签的组件
6. 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 => Instance of 'ShadowRoot' (:1)

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

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

这是我做事方式的问题。我需要 MoneyInput 组件中的一些初始化事件才能进入 shadowRoot 并附加一些处理程序。我不能使用 created 因为 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 activate 中，我有:

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

这失败了，因为 MoneyInput 的 activate 还没有被调用。我认为我真正需要的是一个表明已设置 shadowRoot 的事件，然后在该事件上我可以进行初始化。

我在聚合物元件的生命周期中遗漏了什么？

Answer 1

通常，如果您要扩展 PolymerElement主要回调的顺序将是 ready , created , attached .这些都是自上而下发生的:他们在后代之前被称为祖先。 ready 可能会令人困惑首先被调用，但这是因为 PolymerElement.created在设置 DOM 甚至处理程序之后调用它，并且由于构造函数顺序发生在你的类之前 created构造函数。

Polymer 还添加了一个 domReady您可以重写的方法，当保证创建元素的子元素时调用该方法。这可能就是您所需要的。

参见 http://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods有关生命周期方法的详细信息。

不过，首先我会看看您是否可以通过数据绑定(bind)和声明事件来回避排序问题。