嵌套和模板if = style聚合物飞镖元素的构造和排序？ [英] Construction and ordering of nested and template if= style polymer dart elements?

查看：300
本文介绍了嵌套和模板if = style聚合物飞镖元素的构造和排序？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

非常小的应用程式代码会显示这些多重建构函式呼叫现在在GitHub上的 https://github.com/Chiba-City/testnest 。



我想弄清楚


  1. 为什么聚合物元素会构建两次和

  2. 什么决定了包含其他聚合物元素的聚合物元素的构建顺序，


此外，如果无法使用三个简单的聚合物元素重现这些结果，一个被定义为包含或嵌套其他两个，我也很想知道，以及。



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



我有一个非常简单的应用程序。有一个index.html文件html - 包括一个自定义元素定义的文件，并在其正文中声明一个定制的polymer-dart元素。以下是index.html文件的相关部分。我已经淘汰了习惯的锅炉板。

 < -  index.html  - > 
<！ - 在head  - > 
< link rel =importhref =icapp.html> 
<！ -  boiler plate polymer / init.dart和../dart.js stuff here  - > 
 
<！ - 只有body标记的内容 - > 
< icount-app>< / icount-app>

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

 <！ -  icapp.html  - > 
<！ - 用户统计信息列表 - > 
< polymer-element name =icount-statlist> 
< template>< h3>我的统计资料< / h3>< / template> 
< / polymer-element> 
 
<！ - 查找统计 - > 
< polymer-element name =icount-findstats> 
< template>< h3>查找新统计< / h3>< / template> 
< / polymer-element> 
 
<！ - 这是包含模板中其他两个元素的元素 - > 
< polymer-element name =icount-app> 
< template> 
< h1> icount.us< / h1> <！ -  a simple h1 heading  - > 
 
<！ - 包含always  - > 
< icount-findstats>< / icount-findstats> 
 
<！ - 有条件包含 - 但永远不能为true  - > 
< template if ={{false}}> 
< icount-statlist>< / icount-statlist> 
< / template> 
<！ - 结束icount-app模板 - > 
< / template> 
<！ - 具有元素定义的代码 - > 
< script type =application / dartsrc =icapp.dart>< / script> 
< / polymer-element>

我在.created（）：super.created以及overridenenteredView（）方法来确定这些调用的顺序和频率。这是执行期间的输出。我添加了前缀为 - 的注释

   - 注意这是第一个， on {{false}} 
 IcountStatlist：created 
  - 现在包含的元素被构造
 IcountApp：created 
  - 注意，enterView发生在嵌套元素之前
 IcountApp：enteredView 
  - 注意这个元素被构造两次
 IcountFindstats：created 
 IcountFindstats：created 
 IcountFindstats：enteredView 
  pre> 
 
 
应用程序的输出是预期的（H1和一个H3标签，后者是非条件包含的icount-findstats元素）。但是如何到达这里是奇怪的，并以某种方式，似乎反对添加合理的程序逻辑到这些标签（属性，事件处理程序等）。
     
     
  1. 可见的嵌套元素是两次构造
    2.  
     
  2. 可见的嵌套元素enteredView 
    3.  之后构造所包含的可见元素之上。  。但简单的实验表明，这种顺序似乎任意，或至少，不依赖于嵌套元素的模板或排序。 
     
     
     
    如果我们简单地切换我们的嵌套元素我们的模板输出的偏好，我们得到以下输出。
     
     
     < > IcountStatlist：created 
     IcountStatlist：created 
     IcountStatlist：enteredView 
     IcountApp：created 
     IcountApp：enteredView 
     IcountFindstats：created

这里我们可以注意到：


  1. 可见嵌套元素（此时为icount-statlist）如上所述构建两次，但在之前创建了包含元素。


  2. 此可见嵌套元素的enteredView方法称为先


  3. 模板化嵌套元素再次创建（仅一次），但现在之后 p>


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



另一个实验表明，同一个元素在 2个构造函数调用（对于该元素）中有条件地包含两次结果。



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



不用说，我很困惑。




  • 为什么可见的嵌套元素构建为两次？


  • 为什么模板化嵌套元素一直构建？


  • 为什么一个嵌套元素在之前构成包含元素，而其他之后


  • 为什么包含元素icount-app本身不是 >


  • 如何包含元素明智地设置属性 ）建设？




任何帮助非常感谢。

解决方案

注意




  • enteredView 更改为附加

  • leftView 到分离



strong> -------



我尝试了您的代码，我无法重现您提到的内容。



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

  nest-a：created 
 nest-a：enterView 
 nest-container：created 
 nest-container：insertedView 
 nest-b：created 
 nest-b：enteredView




  • 嵌套 nest-b 实例化所有（输出来自< template if ={{false}}> nest-b 将 false 更改为后，将code>



< 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，对所有其他值/表达式失败




  • 我不知道建筑订单是否结算。
    最近还有一个讨论是否应该将其内部或文档顺序。
    如果您使用绑定，通常不是问题








您可以将发布的应用程式的输出内容发布到GitHub repo吗？


Code for a very small app illustrating these multiple constructor calls is now up on GitHub at https://github.com/Chiba-City/testnest.

I am trying to figure out

  1. why a polymer element would be constructed twice and
  2. what determines the order of construction of polymer elements that contain other polymer elements and
  3. why is a "templated out" element using an "if" template constructed at all.

Also, if one cannot reproduce these results with three simple polymer elements, one defined to contain or nest the other two, I would also love to know that as well.

I am finding duplicate constructor calls and constructor ordering peculiarities. Here is an explanation of the occurrence of these peculiarities.

I have a very simple "app". There is an index.html file that html-includes a file of custom element definitions and declares just one custom polymer-dart element in its body. Here are the relevant portions of the index.html file. I have elided the customary boiler plate.

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

Now in "icapp.html" I define two elements consisting only of h3 labels. I contain these two elements in the template for a third element which begins with a simple H1 label. Here is the code for all three elements.

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

I have put "print" statements in the ".created() : super.created" constructors as well as overriden "enteredView()" methods to determine the order and frequency of these calls. Here is the output during execution. I have added notes prefixed with "--"

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

The output of the application is as expected (H1 and an H3 tags, the latter for the non-conditionally included "icount-findstats" element). But how it arrives here is peculiar, and in ways that would seem to defy adding reasonable program logic to these tags (properties, event handlers and so on).

  1. The visible nested element is constructed twice
  2. The "templated out" nested element is constructed once
  3. The visible nested element's "enteredView" method is called (not surprisingly).

Above the contained visible element is constructed after the containing element. But simple experimentation shows that this ordering seems arbitrary, or at least, not dependent on templating or ordering of nested elements.

If we simply switch our preference for which nested element we "template out" we get the following output instead.

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

Here we can note:

  1. The visible nested element, this time icount-statlist, is constructed twice, as above, but created before the containing element. Also the HTML output h3 tag occurs only once.

  2. This visible nested element's "enteredView" method is called prior to the containing element.

  3. The "templated out" nested element is again created (just once), but now after the containing element.

Further experimentation shows that the same element non-conditionally, visibly nested twice results in 4 constructor calls (for that element).

Another experiment shows that the same element conditionally contained twice results in 2 constructor calls (for that element).

Experimenting with reordering the "templated out" element and the visible element reveals no change in log output, i.e., the order or frequency of constructor calls.

Needless to say, I am perplexed.

  • Why is the visible nested element constructed twice ?

  • Why is the "templated out" nested element constructed at all ?

  • Why is one nested element constructed before the containing element and the other after ?

  • Why is the containing element, icount-app, itself not constructed twice?

  • How can a containing element sensibly set properties of contained elements given nature and ordering of custom polymer element (object) construction?

Any help greatly appreciated.

解决方案

NOTE

  • enteredView was changed to attached
  • leftView to detached

-------

I tried your code and I can't reproduce the things you mentioned.

This is the output I got when I run your app:

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

  • the nested nest-b is not instantiated at all (the output is from the nest-b outside the <template if="{{false}}">

after changing false to true I get

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

You need to put the value in quotes ="{{false}}" instead of ={{false}} It worked as expected anyway because this was evaluated to false as well but would fail for all other values/expressions

  • I don't know if the construction order is settled. Recently there was still a discussion whether it should be constucted inside out or document order. If you use binding this normally isn't an issue

Can you please post the output you got from the app you published to the GitHub repo?

这篇关于嵌套和模板if = style聚合物飞镖元素的构造和排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆