Polymer 2.0：请解释 Observer 方法在这段代码中是如何工作的？

Question

这是代码片段，但我无法理解观察者方法的工作原理

 static get properties() {
  return {
    selected: {
      type: Object,
      observer: '_selectedChanged'
    }
  };
}

_selectedChanged(selected, oldSelected) {
  if (oldSelected) oldSelected.removeAttribute('selected');
  if (selected) selected.setAttribute('selected', '');
}

connectedCallback() {
  super.connectedCallback();

  this.selected = this.firstElementChild;
}

完整代码：https://codelabs.developers.google.com/codelabs/polymer-2-carousel/index.html?index=..%2F..%2Findex#3

什么是selected和oldselected，怎么办oldSelected.removerAttribute？这些对象是元素吗？请详细说明！

Answer 1

selected 是元素的属性。它的值是一些 HTML 元素（在这种情况下，我认为它总是 img ）所以，在 selected 属性中总是保存对 img 的引用 html.当此属性更改时，将使用 2 个参数调用函数 _selectedChanged。第一个参数是当前保存在 selected 中的新图像，第二个参数是旧图像（selected 的先前值）。

在教程中您可以进一步查看代码

  const elem = this.selected.nextElementSibling;
  if (elem) {
    this.selected = elem;
  }

显示 const elem 需要一些 html 元素并将其放入 this.selected.

因此在函数 _selectedChanged 中，他们从先前选择的旧图像中删除了 html 属性（因此它在屏幕上可见）并向新图像添加了新的 html 属性现在在屏幕上可见。

你可以想象img属性selected是当时唯一显示在屏幕上的

希望你能理解我的解释。我的英语不是 100% 所以如果你有问题，问我，我可以试着解释更多。

编辑

绑定和观察者的一些示例：

假设我们有一些 paper-input，它应该根据此输入的值显示一些结果（例如文章）。所以我们有一些 HTML:

<paper-input value="{{search}}" label="Find articles"></paper-input>

这是原始的。只是一些 paper-input 的值存储在 search 属性中。内部脚本标签：

    Polymer({
        is: 'test-el',

        properties: {
            search: {
                type: String,
                observer: "_findResults"
            },
            articles: {
                type: Array
            }
        },

        _findResults() {
            this.set("articles", ['firstArticle', 'secondArticle', Math.random()]);
        },
    });

解释：我们定义了属性search和articles。每当属性搜索发生变化时，它都会调用函数 _findResults （因为观察者）。 _findResults 函数只做一件事。 this.set("articles") 几乎与 this.articles = 相同。有关更多信息，请参见 documentation。所以 this.set("articles", ['firstArticle', 'secondArticle', Math.random()]); 意味着它创建数组并将其设置为 articles 属性。现在，当我们有一些数组，每次用户在 paper-input 中输入一些值时，我们可以添加一些 HTML 来显示这些文章：

<template is="dom-repeat" items="{{articles}}" as="item">
  [[item]] <br>
</template>

我也做了fiddle，大家可以玩玩，多了解一点。 https://jsfiddle.net/2va41sy0/1/

你一开始的问题几乎相同，区别在于它们存储在一些属性对 HTML 对象的引用中，而不仅仅是字符串。这也是关于了解 javascript 而不是聚合物

的一些基础知识

Polymer 2.0：请解释 Observer 方法在这段代码中是如何工作的？

Polymer 2.0 :Please Explain the how the Observer method is working in this code?

polymer

polymer-starter-kit