扩展自定义行为

Question

在 polymer 1.0 中，我为两个自定义元素创建了自定义行为 pageBehavior。在其中一个元素上，我想扩展行为。阅读文档后，似乎我需要创建另一个行为并将其放入数组中。我不想创建另一个行为，因为只有这个元素会使用额外的代码。

有了元素和所需的扩展行为，我如何添加 hidePrintButton 和属性并覆盖函数 fullDisplayeMode？

自定义元素：

  <script>
    Polymer({
      is: "resume-page",
      properties: {
        hidePrintButton: {
          type: Boolean,
          reflectToAttribute: true,
          value: true
        }
      },
      behaviors: [pageBehavior],
      fullDisplayMode: function() {
        this.show = true;
        this.hidePrintButton = false;
        this._toggleStyles();
        this.nextElementSibling.show = true;
      }
    });
  </script>

页面行为：

<script>
  pageBehavior = {
    properties: {
      hideRipple: {
        type: Boolean,
        value: false
      },
      fullDisplay: {
        type: Boolean,
        value: false
      },
      show: {
        type: Boolean,
        reflectToAttribute: true,
        value: true
      }
    },
    _mediaQuery: function(section) {
      if (window.matchMedia( "(min-width: 1200px)" )) {
        section.style.width = "90%";
      } else {
        section.style.width ="90%";
      }
    },
    _toggleWidth: function(section, fullDisplay) {
      if (fullDisplay) {
        section.style.width = "100%";
      } else {
        this._mediaQuery(section);
      }
    },
    _toggleHover: function(section, fullDisplay) {
      if (fullDisplay) {
        section.classList.remove('enabled-hover');
      } else {
        section.classList.add('enabled-hover');
      }
    },
    _toggleRipple: function(fullDisplay) {
      //This is necessary because if page ripple
      //is hidden to quick the animation doesn't finish
      if (fullDisplay) {
        setTimeout(function() {
          this.hideRipple = true;
        }.bind(this), 700);
      } else {
        this.hideRipple = false;
      }
    },
    _toggleStyles: function(fullDisplay) {
      var section = this.firstElementChild;
      this._toggleRipple(fullDisplay);
      this._toggleWidth(section, fullDisplay);
      this._toggleHover(section, fullDisplay);
    },
    fullDisplayMode: function() {
      this._toggleStyles(true);
      this.show = true;
      this.nextElementSibling.show = true;
    },
    homeMode: function() {
      this._toggleStyles(false);
      this.show = true;
      this.nextElementSibling.show = false;
    },
    disappearMode: function() {
      this.show = false;
      this.nextElementSibling.show = false;
    }
  }
</script>

Answer 1

无法扩展行为方法。它只能被覆盖。但是，您仍然可以抽象行为中的共享逻辑，并为自定义目的在行为上使用一些空方法。

例

//In your behavior

fullDisplayMode: function() {
    this.show = true;
    this._toggleStyles();
    this.nextElementSibling.show = true;
    this.prepareFullDisplayMode();
  },
prepareFullDisplayMode:function(){
  //Empty inside behavior
  //Elements could opt to implement it with additional logic
}

使用此模式，您的自定义元素之一可以通过实现 'prepareFullDisplayMode' 添加额外的逻辑，而另一个则不需要。

Answer 2

我不知道我们什么时候可以做到这一点，但我们可以扩展行为： https://www.polymer-project.org/1.0/docs/devguide/behaviors#extending

我将使用 app-localize-behavior 中的 Polymer.AppLocalizeBehavior 作为示例来设置默认语言。

1) 命名你的行为，这样他们就不会与他人发生冲突：

var MyNamespace = MyNamespace|| {};

2) 编写行为的实现：

MyNamespace.LocalizeImpl = {
        ready() {
        },
        attached: function() {
         this.loadResources(this.resolveUrl('../../../locales.json'));
        },
        properties: {
            language : {
                value : "en"
            } 
        },
  };

3) 将实现添加到数组中的新行为。

MyNamespace.Localize = [Polymer.AppLocalizeBehavior, MyNamespaceLocalize.Impl]

总计：

var MyNamespace = MyNamespace || {};

    MyNamespace.Localize = {
        ready() {
        },
        attached: function() {
         this.loadResources(this.resolveUrl('../../../locales.json'));
        },
        properties: {
            language : {
                value : "en"
            } 
        },
  };

  MyNamespace.LocalizeBehavior = [Polymer.AppLocalizeBehavior, MyNamespace.Localize]

然后，在您的元素中，像这样包含它：

<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../path-to-custom-behavior/mynamespace-localize-behavior/mynamespace-localize-behavior.html">
<dom-module id="my-element">
  <style is="custom-style"></style>
  <template is="dom-bind">
   <template is="dom-if" if="{{query}}">
      <h1> {{localize("EmailActivationSuccessful")}}</h1>
    </template>
    <template is="dom-if" if="{{!query}}">
      <h1> {{localize("EmailCodeExpired")}}</h1>
    </template>
  </template>
  <script>
  (function() {
      'use strict';
       Polymer({
        is: 'my-element',
        behaviors: [MyNamespace.LocalizeBehavior],
         });
    })();

  </script>

现在，如您所见，我只包含了 MyNamespace.LocalizeBehavior 并开始使用 "Polymer.AppLocalizeBehavior"

中的所有方法和函数

这是设置默认语言并仅处理单个元素中的语言逻辑的好方法。

解释和注释：

与前面匹配的所有属性、方法、函数行为被覆盖。在这种情况下，我覆盖了 "language" 属性来自 "Polymer.AppLocalizeBehavior".
请记住包含旧行为所在的 .html 文件仅您要扩展行为的地方。之后，您只需随时随地包含您的自定义行为。
在第 3 点，数组的工作方式如下：第一个元素是 extend/overwrite 的行为，第二个元素是您的实现或扩展行为。

扩展自定义行为

Extending Custom Behavior

polymer

polymer-1.0