Question

在聚合物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

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

E.g

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

使用此模式，您的一个自定义元素可以通过实现＆＃39; prepareFullDisplayMode＆＃39;来添加其他逻辑。而另一个则不需要。

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”中的所有方法和函数

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

说明和注释：

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

扩展自定义行为

2 个答案: