2016-11-09 63 views
0

我有我的代码是行为方式的问题列表,以及关于观察员观察者在聚合物中的怪异行为?

质询

1 - 为什么观察者警告,当我刷新页面?

2 - 为什么我在刷新页面时收到两次警报?

3 - 为什么在警报而变化的值,

一 - 第一警报 - [1,2,3,4,5]

b - 塞康警报 - 1,2,3,4, 5

4 - 我不什么观察者正在如果没有什么改变manualy称为直到,我不希望它被称为在页面上刷新

5 - 什么是::input办?

自定义元素

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<dom-module id="icon-toggle-second-demo"> 
    <template> 
    <style> 

    </style> 
    <br> 
    <input type="text" value="{{first::input}}" > 
     second element 
    <button>Reset</button> 
    {{first}} 
     {{asdf}} 

    </template> 

    <script> 
    Polymer({ 
     is: "icon-toggle-second-demo", 
     properties: { 
     'first': { 
      type: Array, 
      reflectToAttribute: true, 
      value: "[1,2,3,4,5]" 
     }, 
     'second': { 
      type: String, 
      notify: true, 
      readOnly: false, 
      value: "default" 
     } 
     }, 
     observers:[ 
      'changedEvent(first.*, 0)', 'con()' 
     ], 
     changedEvent: function(changeRecord, index){ 
      alert(changeRecord.base); 
     }, 
     con: function(){ 
      console.log("asdf"); 
     } 

    }); 
    </script> 
</dom-module> 

家长HTML

<!doctype html> 
<html> 
    <head> 
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script> 

    <link rel="import" href="icon-toggle-second-demo.html"> 
    <style is="custom-style"> 

    </style> 
    </head> 
    <body> 
     demo/index.html - parent <br> 

    <icon-toggle-second-demo ></icon-toggle-second-demo> 

     <script> 
     </script> 
    </body> 
</html> 

回答

1

1 - 为什么观察者警告,当我刷新页面?

当绑定观察者时,聚合物会一次调用观察者,因为您已经提供了一些默认值。 按聚合物的文档

简单观察员打响了第一时间的财产变成定义(!=未定义),并在每一个变化之后,即使该属性变得不确定。

2 - 为什么我在刷新页面时收到两次警报?

这应该是因为当您要求Polymer将属性反映为属性时,它会尝试在属性和属性之间同步值。在阵列的情况下)/对象(如属性值是不同的对象,然后,在属性观察者能够顺利通过

3称为 - 为什么在警报的值而变化,

这是因为第一次被得到解释为字符串(如你的value属性所定义的),第二次将其解释为Array(根据你的类型属性)

4 - 我不会调用观察者,除非手动更改某些东西,我不希望它被称为页面刷新

是的,这是可能的,你将不得不使用simple observer为了做到这一点

5 - 输入是做什么的?

::input帮助聚合物结合non-polymer元素。由于非聚合物元素不会告知何时发生价值变化聚合物使用此注释来标记需要观察的属性。


下面是我的一些观察从您的代码

  • 为什么Arrayfirst?你将如何从输入标签中获取数组。据我可以认为输入标签只会给你字符串作为输入
  • 你为什么使用reflectToAttribute。根据Polymer的文件ReflectToAttribute是非常昂贵的。所以,直到你有一个理由使用避免使用它
  • 你不需要保留属性名称引号。它应该是first不是'first'
  • 您已将first指定为Array,但您已将其指定为String值。
  • 您应该查看Polymer的文档或其他一些教程,以便更好地了解如何使用Polymer。
+0

FIRSTLY根据docs-Type:constructor(布尔值,日期,数字,字符串,数组或对象)之一键入属性可以具有这些值。我正在使用reflectToAttribute只是为了试验。问题 - 当reflectToAttribute为true时,警报会被触发两次,其他则会触发一次。为什么? –

+0

是的,你的类型值是有效的,但我指出的是你的类型和值属性不同步。 'type'说它的数组和'value'说它的字符串 – a1626

+0

我已经更新了我的问题2和3的答案 – a1626