0

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

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

我的元素.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)

或类似的东西。

但他是什么意思？那将如何运作？

4

2 回答 2

0

尝试如下定义您的行为：

<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>
于 2017-03-14T11:44:31.510 回答
0

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

形式

var MyBehaviors =

至

MyBehaviors =
于 2017-03-14T08:55:56.160 回答