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

Question

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

问题

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

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

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

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

b - 第二次警报 - 1,2,3,4,5

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

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>

PARENT 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 将调用一次观察者，因为您已经为其提供了一些默认值。根据聚合物的文档

Simple observers are fired the first time the property becomes defined (!= undefined), and on every change thereafter, even if the property becomes undefined.

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

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

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

这是因为第一次它被解释为字符串（根据您的值属性定义），第二次它被解释为数组（根据您的类型属性）

4 - 除非手动更改某些内容，否则我不会调用观察者，我不希望在页面刷新时调用它

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

5 - ::input 有什么作用？

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

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

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

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

Weird behaviour of observers in polymer?

polymer

polymer-1.0