dart - 嵌套和模板if =样式的 polymer Dart 元素的构造和排序？

Question

GitHubt上的https://github.com/Chiba-City/testnest上有一个非常小的应用程序的代码，这些代码说明了这些多个构造函数调用。

我想弄清楚

为什么将聚合物元素构造两次和

是什么决定包含其他聚合物元素和

的聚合物元素的构造顺序

为什么完全使用“if”模板构造“templated out”元素。

同样，如果一个人不能用三个简单的聚合物元素(一个被定义为包含或嵌套另外两个)来再现这些结果，我也很想知道这一点。

我发现 重复构造函数调用和构造函数排序特性。这是这些特殊情况发生的解释。

我有一个非常简单的“应用程序”。有一个index.html文件，该文件html-包括一个自定义元素定义文件，并且在其主体中仅声明了一个自定义polymer-dart元素。这是index.html文件的相关部分。我已经消除了惯用的锅炉板。

<!-- index.html -->
<!-- in head -->
<link rel="import" href="icapp.html">
<!-- boiler plate polymer/init.dart and ../dart.js stuff here -->

<!-- only contents of body tag -->
<icount-app></icount-app>

现在，在“icapp.html”中，我定义了两个仅由h3标签组成的元素。我将这两个元素包含在第三个元素的模板中，第三个元素以简单的H1标签开头。这是所有三个元素的代码。

<!-- icapp.html -->
<!-- User stats list -->
<polymer-element name="icount-statlist" >
  <template><h3>My Stats</h3></template>
</polymer-element>

<!-- Find stats -->
<polymer-element name="icount-findstats" >
  <template><h3>Find New Stats</h3></template>
</polymer-element>

<!-- This is the element that contains the other two elements in its template -->
<polymer-element name="icount-app"> 
<template>
  <h1>icount.us</h1> <!-- a simple h1 heading -->

  <!-- Included always -->
  <icount-findstats></icount-findstats>

  <!-- Included conditionally - but can never be true -->
  <template if="{{false}}">
    <icount-statlist ></icount-statlist>
  </template>
<!-- End icount-app template -->
</template>
<!-- The code with the element definitions -->
<script type="application/dart" src="icapp.dart"></script>
</polymer-element>

我在“.created():super.created”构造函数以及重写的“enteredView()”方法中放置了“print”语句，以确定这些调用的顺序和频率。这是执行期间的输出。我添加了以“-”为前缀的笔记

-- note this is first, although conditional on {{false}}
IcountStatlist: created           
-- now the containing element is constructed
IcountApp: created                
-- notice that enteredView happens before the nested element
IcountApp: enteredView
-- notice that this element is constructed twice
IcountFindstats: created          
IcountFindstats: created
IcountFindstats: enteredView

应用程序的输出符合预期(H1和H3标签，后者用于无条件包含的“icount-findstats”元素)。但是它如何到达这里是很特殊的，而且在某种程度上似乎无视向这些标签(属性，事件处理程序等)添加合理的程序逻辑。

可见的嵌套元素被构造两次

一旦

，就会构造“模板化”嵌套元素

调用可见的嵌套元素的“enteredView”方法(并不奇怪)。

在包含的可见元素上方之后，在包含的可见元素上方构造 。但是简单的实验表明，这种排序似乎是任意的，或者至少不依赖于嵌套元素的模板化或排序。

如果仅将偏好设置切换为“模板化”哪个嵌套元素，则将获得以下输出。

IcountStatlist: created
IcountStatlist: created
IcountStatlist: enteredView
IcountApp: created
IcountApp: enteredView
IcountFindstats: created

在这里我们可以注意:

可见的嵌套元素(这次是icount-statlist)如上所述进行了两次构造，但在包含元素之前创建了。 HTML输出h3标签也仅出现一次。

这个可见的嵌套元素的“enteredView”方法在包含元素之前在之前称为。

再次创建“模板化”嵌套元素(仅创建一次)，但现在在包含元素之后创建。

进一步的实验表明，相同的元素无条件地被可视化地嵌套两次两次会导致 4构造函数调用(针对该元素)。

另一个实验表明，同一元素有条件地包含两次，结果 2构造函数调用(针对该元素)。

对“templated out”元素和可见元素进行重新排序的实验表明，日志输出没有变化，即构造函数调用的顺序或频率。

不用说，我很困惑。

为什么将可见的嵌套元素两次构造，即？

为什么在所有中都构造了“templated out”嵌套元素？

为什么在之前将一个嵌套元素构造为包含元素，在之后构造另一个嵌套元素？

为什么包含元素，icount-app，本身的而不是构造两次？

如何在给定自定义聚合物元素(对象)构造的性质和顺序的情况下，包含元素的明智地设置包含元素的属性？

任何帮助，不胜感激。

Answer 1

注意

enteredView更改为attached

leftView到detached

-------

我尝试了您的代码，但无法复制您提到的内容。

这是我运行您的应用程序时得到的输出:

nest-a: created
nest-a: enterView
nest-container: created
nest-container: enteredView
nest-b: created
nest-b: enteredView

完全不实例化嵌套的nest-b(输出来自nest-b之外的<template if="{{false}}">

将 false更改为 true后，我得到了

nest-a: created
nest-a: enterView
nest-container: created
nest-container: enteredView
nest-b: created
nest-b: enteredView
nest-b: created
nest-b: enteredView

您需要将值放在引号 ="{{false}}"中，而不是 ={{false}}中
无论如何，它都能按预期工作，因为它也被评估为false，但对于所有其他值/表达式都将失败

我不知道施工订单是否已结算。
最近，仍在讨论是否应该由内而外或按文档顺序进行构造。
如果您使用绑定(bind)，通常这不是问题

您能否将您从发布的应用程序获得的输出发布到GitHub存储库中？