Question

有没有办法在自定义元素上获取所有绑定属性名称的列表而不依赖于Polymer对象的属性？

<custom-element foo="{{bar}}" baz="{{qux}}"></custom-element>

上面应该有一个list，bindings / properties，值为：

["foo", "baz"];

Answer 1

您可以使用element.properties获取Polymer元素上定义的所有属性。

假设我们有以下Polymer定义：

Polymer({
  is: "x-element",
  properties: {
    foo:{
      type: Object
    },
    baz:{
      type: Object
    }
  }
});

它已被包含在html文件中：

<x-element id="x" foo="{{bar}}" baz="{{qux}}"></x-element>

为了获得这些契约，我们可以做到以下几点：

var xElemProperties = document.querySelector('#x').properties;

那将包含所有属性。属性不需要在<x-element>上设置一个值。如果您只想获取<x-element>上设置的属性。您可以将.properties数组与＆＃39; element.attributes＆＃39;进行比较。阵列。 .attributes将包含已在元素上设置的所有属性。它还包含id和其他类似的字段。

演示（查看浏览器控制台）：

＆＃13;

<!doctype html>
<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>
<body>

<dom-module id="x-element">

  <template>
  </template>

  <script>
    (function(){
      Polymer({
        is: "x-element",
        properties: {
          foo:{
            type: Object
          },
          baz:{
            type: Object
          }
        }
      });
    })();
  </script>

</dom-module>

<x-element id="x" foo="{{bar}}" baz="{{qux}}"></x-element>
<x-element id="z"></x-element>

<script>
  var xElemProperties = document.querySelector('#x').properties;
  console.log(xElemProperties);
  var zElemProperties = document.querySelector('#z').properties;
  console.log(zElemProperties);
</script>

</body>

＆＃13;

在Polymer

1 个答案: