努力去理解relectToTo的屬性

Question

我很努力去理解reflectToAttribute對Polymer元素屬性的微妙之處。

我有一對元素用於在dom樹周圍傳輸值，如iron-meta，我稱之爲akc-meta和akc-meta-query。在我的測試夾具我這樣做

<test-fixture id="basic-test"> 
<template> 
    <template is="dom-bind" id=app> 
    <akc-meta key="[[key1]]" value="{{value1}}" id="meta1"></akc-meta> 
    <akc-meta-query key="[[key2]]" value="{{value2}}" id="meta2"></akc-meta-query> 
    <akc-meta-query key="[[key3]]" value="{{value3}}" id="meta3"></akc-meta-query> 
    <akc-meta key="[[key4]]" value="{{value4}}" id="meta4"></akc-meta> 
    </template> 
</template> 
</test-fixture> 

，並在我的測試套件我可以設置值，這樣

 app.key1 = 'keya'; 
     app.key2 = 'keya'; 
     app.key3 = 'keya'; 
     app.value1 = 'This is a multiple query test'; 
     expect(app.value2).to.equal('This is a multiple query test'); 
     expect(app.value3).to.equal('This is a multiple query test'); 
     app.value1 = 'New Value'; 
     expect(app.value2).to.equal('New Value'); 
     expect(app.value3).to.equal('New Value'); 

當這些元素時的密鑰是相同的元素之間的引擎蓋下的傳輸值。

元素無論使用reflectToAttribute對任何屬性的，雖然akc-meta-query的value屬性不使用notify:true

那麼，是什麼reflectToAttribute實際上做，你爲什麼需要它？

Answer 1

我在this jsbin中創建了一個小例子。

<style> 
    x-test { 
     display: block; 
    } 
    x-test[prop1="initialvalue1"] { 
     border: 5px solid yellow; 
    } 
    x-test[prop2="initialvalue2"] { 
     background: green; 
    } 
    x-test[prop1="newvalue1"] { 
     border: 5px solid black; 
    } 
    x-test[prop2="newvalue2"] { 
     background: red; 
    } 


</style> 
<dom-module id="x-test"> 
    <template> 
    <div>{{prop1}}</div> 
    <div>{{prop2}}</div> 
    <button on-click="update1">Update Prop1</button> 
    <button on-click="update2">Update Prop2</button> 
    </template> 
</dom-module> 

<script> 
    HTMLImports.whenReady(function() { 
    Polymer({ 
     is: 'x-test', 
     properties:{ 
     prop1: { 
      type:String 
     }, 
     prop2: { 
      type:String, 
      reflectToAttribute: true 
     }, 
     }, 
     update1: function(){ 
     this.prop1 = "newvalue1"; 
     }, 
     update2: function(){ 
     this.prop2 = "newvalue2"; 
     }  
    }); 
    }); 
</script> 

<x-test prop1="initialvalue1" prop2="initialvalue2"></x-test> 

這裏的元素有兩個屬性。 prop1未反映到屬性中，但是prop2是。兩者都設置爲初始值。如果你打開了開發工具，你會看到這樣的事情：

有一個更新按鈕來更改或者prop1或prop2。如果你點擊每個按鈕並更新兩個屬性，你會得到這張圖片

正如你所看到的，prop1仍然有其舊狀態。狀態變化未反映回該屬性。相比之下，prop2已被反映併發生了變化。

現在，如果您通過JavaScript訪問任何屬性，您將獲得更新後的值。但是，當您訪問HTML屬性時，如果是prop1，則不會。

這可能是一個用例，當你有我的例子中的屬性選擇器的CSS規則。更新prop1時，選擇器x-test[prop1="newvalue1"]不適用。另一方面，x-test[prop2="newvalue2"]在更新prop2之後確實會應用，因爲它被配置爲反映屬性。