先前研究

Question

我们如何使用该行为从元素内部访问行为的属性？

从 my-element.html 内部，使用this.randomData访问导入行为的randomData属性似乎应该可以正常工作;但事实并非如此。

我-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>

随机数据behavior.html

<script>
  var MyBehaviors = MyBehaviors || {};
  MyBehaviors.MyRandomBehaviorImpl = {
    properties: {
      randomData: {
        type: String,
        value: function() {
          return 'My random data';
        },
      },
    },
  };
  MyBehaviors.MyRandomBehavior = [
    MyBehaviors.MyRandomBehaviorImpl,
  ];
</script>

<小时/>

先前研究

My digging turned up this issue on the topic。 →Here is the 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)

或类似的东西。

但他的意思是什么？这会怎么样？

Answer 1

我认为这是因为您对行为使用了var声明，这限制了该属性的范围。

形式

var MyBehaviors =

到

MyBehaviors =

Answer 2

尝试按如下方式定义您的行为：

<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>

Polymer 1.x：访问行为属性

先前研究

2 个答案: