聚合物1.x：訪問行為屬性
[英]Polymer 1.x: Accessing behavior properties
問題描述
我們如何使用行為從元素內部訪問行為的屬性？
從my-element.html內部，使用this.randomData訪問導入行為的randomData屬性似乎應該可以正常工作。 但事實並非如此。
<link rel="import" href="random-data-behavior.html"> <script> (function() { Polymer({ is: 'my-element', behaviors: [ MyBehaviors.MyRandomBehavior, ], show: function() { // unsuccessfully trying to access the behavior property: `randomData` // using `this.randomData` seems like it should work; but it doesn't console.log('randomData', this.randomData); // undefined }, ... </script>
隨機數據behavior.html
<script> var MyBehaviors = MyBehaviors || {}; MyBehaviors.MyRandomBehaviorImpl = { properties: { randomData: { type: String, value: function() { return 'My random data'; }, }, }, }; MyBehaviors.MyRandomBehavior = [ MyBehaviors.MyRandomBehaviorImpl, ]; </script>
先驗研究
我的挖掘發現了這個問題 。 → 這是jsBin 。
https://jsbin.com/lihakafuki/1/edit?html,console <!DOCTYPE html> <html> <head> <title>Polymer behaviors scope issue</title> <meta name="description" content="Example of issue with behaviors scope on Polymer"> <meta charset="utf-8"> <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> </head> <body> <!-------------------- working-element --------------------> <dom-module id="working-element"> <template> <span>Working Element (Check the console)</span> </template> <script> Polymer({ is: "working-element", properties: { property: { type: String, value: "Default value" } }, getProperties() { // Returns an object with the properties values return Object .keys(this.properties) .reduce((o,p)=>Object.assign(o,{[p]:this[p]}),{}); } }); </script> </dom-module> <working-element></working-element> <script> console.log(document.querySelector("working-element").getProperties()); </script> <!-------------------- /working-element --------------------> <!-------------------- broken-element --------------------> <script> // Behavior to mimic working-element window.SomeNamespace = window.SomeNamespace || {}; SomeNamespace.SomeBehavior = { properties: { property: { type: String, value: "Default value" } }, getProperties() { // Returns an object with the properties values return Object .keys(this.properties) .reduce((o,p)=>Object.assign(o,{[p]:this[p]}),{}); } }; </script> <dom-module id="broken-element"> <template> <span>Broken Element (Check the console)</span> </template> <script> Polymer({ is: "broken-element", behaviors: [SomeNamespace.SomeBehavior] }); </script> </dom-module> <broken-element></broken-element> <script> // This should have the same output as working-element // but instead it outputs an empty object console.log(document.querySelector("broken-element").getProperties()); </script> <!-------------------- /broken-element --------------------> </body> </html>
最后一條評論為：
https://github.com/Polymer/polymer/issues/3681不過，我認為現在我會解決
this.behaviors.map(behavior=>behavior.properties)
或類似的東西。
但是他是什么意思？ 那將如何工作？
2 個解決方案
解決方案1
0 2017-03-14 08:55:56
我認為這是因為您為行為使用了var聲明，因此限制了屬性的范圍。
形成
var MyBehaviors =
至
MyBehaviors =
解決方案2
0 2017-03-14 11:44:31
嘗試如下定義行為：
<script>
(function (root) {
'use strict';
root.MyBehaviors = root.MyBehaviors || {};
root.MyBehaviors.MyRandomBehavior = root.MyBehaviors.MyRandomBehavior || {};
root.MyBehaviors.MyRandomBehavior.Foo = {
bar: () {
console.log("Hello!");
}
};
}(window));
</script>
共享的聚合物行為特性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.