2016-11-09 69 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