Polymer 2.0：請解釋Observer方法在這段代碼中的工作方式？

這是代碼片段，但我無法理解如何觀測方法工作Polymer 2.0：請解釋Observer方法在這段代碼中的工作方式？

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

什麼是選擇oldselected，我們該怎麼辦oldSelected.removerAttribute？這些元素的對象？請詳細說明！

來源

2017-04-12 abcd_1234

selected是元素的屬性。它的價值是一些HTML元素（在這種情況下，它總是img我認爲）所以，在selected屬性總是保存在HTML中某處的參考img。當這個屬性改變時，函數_selectedChanged被2個參數調用。第一個參數是當前保存在selected中的新圖像，第二個參數是舊圖像（以前的值爲selected）。

進一步在教程中，你能看到結果表明：const elem需要一些HTML元素代碼

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

，放入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>

我做也不甘示弱，所以你可以用它玩和理解多一點。 https://jsfiddle.net/2va41sy0/1/

你的問題在開始時幾乎是相同的，它們存儲在HTML對象的某些屬性引用中，而不僅僅是字符串。這也對了解JavaScript的一些基本知識，而不是聚合物

來源

2017-04-12 12:16:56

可以請你寫的，你當按鈕被按下或別的東西來證明觀察者的運作改變一些div的文本值一些代碼。我會非常感謝，如果你能這樣做，請 –

@AkshayJassal我做了一個編輯。看看它:) –

thnx很多人！我真的欠你一個！（對遲交的道歉） –

Polymer 2.0：請解釋Observer方法在這段代碼中的工作方式？

回答

相關問題