Polymer 1.x: Accessing behavior properties

Question

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; but it does not.

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

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

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?

score 0 · Answer 1 · edited Mar 15 '17 at 04:48

0

I think it's because you used the var declaration for your behaviours, this limit the scope of the property.

form

var MyBehaviors =

to

MyBehaviors =

edited Mar 15 '17 at 04:48

Let Me Tink About It

15,156
21
98
207

answered Mar 14 '17 at 08:55

JoelCode

326
1
7

score 0 · Answer 2 · answered Mar 14 '17 at 11:44

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>

Polymer 1.x: Accessing behavior properties

Prior Research

2 Answers2