扩展自定义行为

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

来源

2015-11-02 dman

啊......现在正在工作。以前没有...可能是一个坏的刷新！ – dman

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

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 
}

地使用这种模式，一个你自定义元素可以通过实施“prepareFullDisplayMode”而其他就不需要添加额外的逻辑。

来源

2015-11-02 03:05:58

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

我要去为例使用Polymer.AppLocalizeBehavior从APP-本地化行为设置默认语言。

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”中的 “语言”属性。
请记住包含旧行为所在的.html文件只有您要在其中扩展行为。之后，您只需将自定义行为包含在任何地方，随时随地。
在第3点，数组的工作方式如下：第一个元素是扩展/覆盖的行为，第二个元素是您的实现或扩展行为。

来源

2016-07-31 15:55:20

扩展自定义行为

回答

相关问题