Question

关于观察员

，我有一个关于我的代码行为方式的问题列表

问题

1 - 当我刷新页面时，为什么观察者会发出警报？

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

3 - 为什么警报中的值会有所不同，

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

b - secon alert - 1,2,3,4,5

4 - 我不知道观察者被称为直到什么，除非事情发生变化，我不希望在页面刷新时调用它

5 - ::input做了什么？

CUSTOM ELEMENT

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

Answer 1

1 - 当我刷新页面时，为什么观察者会发出警报？

当绑定观察者时，Polymer会一次调用观察者，因为你已经提供了一些默认值。根据聚合物的文档

第一次定义属性时会触发简单的观察者（！=未定义），并且在此后的每次更改中都会触发，即使属性未定义。

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

这应该是因为当您要求Polymer将属性反映为属性时，它会尝试在属性和属性之间同步值。在Array / Object的情况下，因为属性中的值是不同的对象，那么在属性观察者中的值被调用

3 - 为什么警报中的值会有所不同，

这是因为它第一次被解释为String（由你的value属性定义），第二次被解释为Array（根据你的type属性）

4 - 除非手动更改某些内容，否则我不知道所调用的观察者是什么，我不希望在页面刷新时调用它

是的，有可能，你必须使用simple observer才能做到这一点

5 - ::输入做什么？

::input帮助Polymer绑定non-polymer个元素。由于非Polymer元素在有值更改时不通知Polymer使用此注释来标记需要观察的属性。

以下是我对您的代码的一些观察

为什么first类型为Array？你将如何从输入标签中获取数组。据我所知，输入标签只会给你String作为输入
您为什么使用reflectToAttribute。根据Polymer的文档ReflectToAttribute非常昂贵。所以，除非你有理由使用避免使用它
您不需要在引号中保留属性名称。它应该是first而不是'first'
您已将first命名为Array，但您已为其分配String值。
您应该查看Polymer的文档或其他一些教程，以便更好地了解如何使用Polymer。

观察者在聚合物中的奇怪行为？

1 个答案: