Polymer 1.x: доступ к поведенческим свойствам

Как нам получить доступ к свойствам поведения внутри элемента, использующего это поведение?

Изнутри 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>

Предыдущие исследования

Мои раскопки подняли этот вопрос по теме. → Вот 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 ответа

Попробуйте определить свое поведение следующим образом:

<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>
Источник

Я думаю, это потому, что вы использовали var декларация для вашего поведения, это ограничивает область действия свойства.

форма

var MyBehaviors =

в

MyBehaviors =
Источник
Другие вопросы по тегам