Question

用于说明这些多个构造函数调用的非常小的应用程序的代码现已在https://github.com/Chiba-City/testnest的GitHub上启用。

我想弄清楚

为什么聚合物元素构造两次和
什么决定了含有其他聚合物元素和
为什么＆＃34;模板化＆＃34;元素使用＆＃34; if＆＃34;模板构建完毕。

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

我发现重复构造函数调用和构造函数排序特性。以下是对这些特点发生的解释。

我有一个非常简单的应用程序＆＃34;。有一个index.html文件，其中包含自定义元素定义的文件，并在其正文中声明了一个自定义聚合物-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>

现在进入＆＃34; icapp.html＆＃34;我定义了两个仅由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>

我已经把＃34; print＆＃34; ＆＃34; .created（）中的语句：super.created＆＃34;构造函数以及覆盖＆＃34; enteredView（）＆＃34;确定这些调用的顺序和频率的方法。这是执行期间的输出。我添加了前缀为＆＃34; - ＆＃34;

-- 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标签，后者用于非条件包含＆＃34; icount-findstats＆＃34;元素）。但它到达这里的方式是特殊的，并且似乎无法向这些标签（属性，事件处理程序等）添加合理的程序逻辑。

可见嵌套元素构造两次
＆＃34;模板化＆＃34;嵌套元素构造一次
可见的嵌套元素＆＃34;进入View＆＃34;方法被称为（毫不奇怪）。

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

如果我们只是改变我们对哪个嵌套元素的偏好我们＆＃34;模板输出＆＃34;我们得到以下输出。

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

我们在这里可以注意到：

可见的嵌套元素，这次是icount-statlist，如上所述构造了两次，但是在之前包含了元素。此外，HTML输出h3标记只出现一次。
这个可见的嵌套元素＆＃34;进入View＆＃34;方法被称为先前到包含元素。
＆＃34;模板化＆＃34;再次创建嵌套元素（仅一次），但现在包含元素。

进一步的实验表明，相同的元素非条件地，可见地嵌套两次导致 4个构造函数调用（对于该元素）。

另一个实验表明，有条件地包含两次的相同元素会导致 2个构造函数调用（对于该元素）。

尝试重新排序＆＃34;模板化＆＃34; element和visible元素显示日志输出没有变化，即构造函数调用的顺序或频率。

毋庸置疑，我很困惑。

为什么可见的嵌套元素构造为两次？
为什么＆＃34;模板化＆＃34;嵌套元素构建>？

为什么一个嵌套元素在包含元素之前构建而另一个在之后构建？

为什么包含元素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}} 它无论如何都按预期工作，因为它被评估为假，但对所有其他值/表达式

都会失败

我不知道施工订单是否已经解决。最近还在讨论它是应该由内部构建还是在文档顺序中构建。如果您使用绑定，这通常不是问题

您能否将您从发布的应用中获得的输出发布到GitHub回购？

Answer 2

此问题发生在Dart编辑器的以下稳定版本中。

$ dart --version 
Dart VM version: 1.2.0 (Tue Feb 25 07:34:09 2014) on "linux_x64"

安装最新的 dev channel 版本的Dart SDK使得多个构造函数调用消失了。

$ dart --version
Dart VM version: 1.3.0-dev.6.1 (Sat Mar 22 02:14:22 2014) on "linux_x64"

testnest 项目的输出现在是：

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

如何围绕嵌套元素构造的顺序进行编码 - 之前的和之后的包含元素 - 在Dart代码中仍然是一个开放式练习对于读者：）

嵌套和模板if = style聚合物dart元素的构造和排序？

2 个答案: