Question

我正在努力理解reflectToAttribute在Polymer elements属性上的微妙之处。

我有一对用于在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');

当密钥相同时，这些元素在元素之间传递值。

虽然value的{{1}}属性确实使用了akc-meta-query

，但这两个元素都没有对任何属性使用reflectToAttribute

那么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仍处于旧状态。状态更改尚未反映回属性。相比之下，prop1已被反映并发生了变化。

现在，如果您通过JavaScript访问任一属性，您将获得更新的值。但是，当您访问HTML属性时，如果是x-test[prop1="newvalue1"]则不会。

这个用例可能是你的CSS规则带有属性选择器的例子。 prop1更新时，选择器x-test[prop2="newvalue2"]不适用。另一方面prop2在更新select account_name, count(ordered_item) from oe_order_lines_all ool, cust_accounts_all hca, oe_order_headers_all ooh where to_date(ooh.creation_date) > '2015-10-01' and to_date(ooh.creation_date) < '2015-11-01' and ooh.flow_status_code <> 'CANCELLED' and ooh.sys_document_ref = ool.sys_document_ref and hca.cust_account_id=ooh.org_id group by hca.account_name, ool.ordered_item order by ool.ordered_item DESC后确实适用，因为它被配置为反映属性。

苦苦挣扎，以了解relectToAttribute的微妙之处

1 个答案: