Polymerオブジェクトのプロパティに頼らずに、カスタムエレメントのすべてのバインディングプロパティー名のリストを取得する方法はありますか？ポリマーのカスタムエレメントバインディングのリスト
<custom-element foo="{{bar}}" baz="{{qux}}"></custom-element>
上記の値のリスト、バインディング/性質を、持っている必要があります。
["foo", "baz"];
あなたはelement.propertiesとポリマー要素で定義されたすべてのプロパティを取得することができます。
Polymer({
is: "x-element",
properties: {
foo:{
type: Object
},
baz:{
type: Object
}
}
});
そして、それは次のようにHTMLファイルに含まれています：私たちは、次の操作を行うことができますpropretiesを取得するために
<x-element id="x" foo="{{bar}}" baz="{{qux}}"></x-element>
：
たちは、次のPolymer定義を考えてみましょう
var xElemProperties = document.querySelector('#x').properties;
これにはすべてのプロパティが含まれます。この場合、プロパティには<x-element>の値を設定する必要はありません。 <x-element>に設定されているプロパティのみを取得する場合。 .properties配列を 'element.attributes'配列と比較することができます。 .attributesには、要素に設定されているすべてのプロパティが含まれます。それにはidなどのフィールドも含まれます。
デモ（ブラウザコンソールに見える）：
<!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>要件の1つは、事前にプロパティ名を知らなくてもプロパティを収集する必要があることです。この場合、fooとbazは
'[FOO、バー]'や '[FOO、バズ]'？ – winhowes
'[foo、baz]'がOP –
で修正されました興味深い質問です。好奇心のために、なぜこの情報が必要ですか？ –