聚合物1.x：访问行为属性
[英]Polymer 1.x: Accessing behavior properties
问题描述
How do we access the properties of a behavior from inside an element using that behavior? 
我们如何使用行为从元素内部访问行为的属性？
From inside my-element.html , using this.randomData to access the randomData property of the imported behavior seems like it should work; 从my-element.html内部，使用this.randomData访问导入行为的randomData属性似乎应该可以正常工作。 but it does not. 但事实并非如此。
我-element.html
<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>
random-data-behavior.html
随机数据behavior.html
<script> var MyBehaviors = MyBehaviors || {}; MyBehaviors.MyRandomBehaviorImpl = { properties: { randomData: { type: String, value: function() { return 'My random data'; }, }, }, }; MyBehaviors.MyRandomBehavior = [ MyBehaviors.MyRandomBehaviorImpl, ]; </script>
Prior Research 先验研究
My digging turned up this issue on the topic . 我的挖掘发现了这个问题 。 → Here is the jsBin . → 这是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>
The last comment reads: 最后一条评论为：
https://github.com/Polymer/polymer/issues/3681
Still, I think for now I'll solve it with
this.behaviors.map(behavior=>behavior.properties)
or something like that.
But what did he mean? 但是他是什么意思？ How would that work? 那将如何工作？
2 个解决方案
解决方案1
0 2017-03-14 08:55:56
I think it's because you used the var declaration for your behaviours, this limit the scope of the property. 我认为这是因为您为行为使用了var声明，因此限制了属性的范围。
form 形成
var MyBehaviors =
to 至
MyBehaviors =
解决方案2
0 2017-03-14 11:44:31
Try defining your behavior as follows: 尝试如下定义行为：
<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.