文档章节

polymer1.0 Behaviors

孟飞阳
 孟飞阳
发布于 2018/05/02 11:23
字数 526
阅读 15
收藏 0

Polymer supports extending custom element prototypes with shared code modules called behaviors.

A behavior is an object that looks similar to a typical Polymer prototype. A behavior can define lifecycle callbacksdeclared propertiesdefault attributesobservers, and event listeners.

To add a behavior to a Polymer element definition, include it in a behaviors array on the prototype.

Polymer({
  is: 'super-element',
  behaviors: [SuperBehavior]
});

For lifecycle events, the lifecycle callback is called for each behavior in the order given in the behaviorsarray, followed by the callback on the prototype.

Any non-lifecycle functions on the behavior object are mixed into the base prototype, unless the prototype already defines a function of the same name. If multiple behaviors define the same function, the last behavior in the behaviors array takes precedence over other behaviors.

Defining behaviors

To define a behavior, create a JavaScript object that you can reference from your element definition. The following example simply adds HighlightBehavior to the global scope:

highlight-behavior.html:

<script>
    HighlightBehavior = {

      properties: {
        isHighlighted: {
          type: Boolean,
          value: false,
          notify: true,
          observer: '_highlightChanged'
        }
      },

      listeners: {
        click: '_toggleHighlight'
      },

      created: function() {
        console.log('Highlighting for ', this, 'enabled!');
      },

      _toggleHighlight: function() {
        this.isHighlighted = !this.isHighlighted;
      },

      _highlightChanged: function(value) {
        this.toggleClass('highlighted', value);
      }

    };
</script>

my-element.html:

<link rel="import" href="highlight-behavior.html">

<script>
  Polymer({
    is: 'my-element',
    behaviors: [HighlightBehavior]
  });
</script>

Polymer doesn't specify any particular method for referencing your behaviors. Behaviors created by the Polymer team are added to the Polymer object. When creating your own behaviors, you should use some other namespace to avoid collisions with future Polymer behaviors. For example:

window.MyBehaviors = window.MyBehaviors || {};
MyBehaviors.HighlightBehavior = { ... }

Here the MyBehaviors namespace is explicitly added to the global window object, so the behavior can be referenced from your elements as MyBehaviors.HighlightBehavior.

Extending behaviors

To extend a behavior, or create a behavior that includes an existing behavior, you can define a behavior as an array of behaviors:

<!-- import an existing behavior -->
<link rel="import" href="oldbehavior.html">

<script>
  // Implement the extended behavior
  NewBehaviorImpl = {
    // new stuff here
  }

  // Define the behavior
  NewBehavior = [ OldBehavior, NewBehaviorImpl ]
</script>

As with the element's behaviors array, the rightmost behavior takes precedence over behaviors earlier in the array. In this case, anything defined in NewBehaviorImpl takes precedence over anything defined in OldBehavior.

Naming each element in the behavior array is a good practice, since it allows behaviors to explicitly reference methods on the behaviors they extend (for example, NewBehaviorImpl can call to methods on OldBehavior).

Performing work at registration time

In some cases, a behavior may need to perform one-time work when an element is registered. For example, to allocate a shared object accessed by all element instances, or to modify the element prototype.

For example, iron-a11y-keys-behavior allows elements and other behaviors to add bindings by specifying a keyBindings object on the prototype. A single element could potentially have multiple keyBindings objects, one from its own prototype and several inherited from behaviors. The iron-a11y-keys-behavior uses the registered callback to collate these keyBindings objects into a single object on the element's prototype.

The following simplified example demonstrates how iron-a11y-keys-behavior collates objects from multiple behaviors.

registered: function() {
  // collate keyBindings objects from behaviors & element prototype
  var keyBindings = this.behaviors.map(function(behavior) {
    return behavior.keyBindings;
  });
  if (keyBindings.indexOf(this.keyBindings) === -1) {
    keyBindings.push(this.keyBindings);
  }
  // process key bindings in order
  keyBindings.forEach(function() {
    ...
  });
}

 

© 著作权归作者所有

共有 人打赏支持
孟飞阳
粉丝 212
博文 998
码字总数 550537
作品 5
朝阳
个人站长
私信 提问
polymer1.0 组件的生命周期

按触发的顺序: created:当组件被 new 时调用,最早被触发,此时还不能访问组件的属性,但不知道为什么直接通过HTML的方式也会执行,可能是内部实例化了。 ready:当组件内部依赖的子组件或...

孟飞阳
2018/05/02
0
0
polymer1.0 样式(2)

跨作用域的样式 背景 对于Webcomponent而言,Shadow Dom 带来了很多作用域以及样式封装之类的好处,使得组件在CSS影响范围上变得更加安全和简单。样式不会被上层的组件介入影响,更不会被内层...

孟飞阳
2018/05/02
0
0
polymer1.0 事件监听

可以在listeners对象中监听事件 这句话的意思是给id为special的元素单独指定一个tap事件。 除了通过这种方式,我们还可以这样。 this.listen(要添加事件的元素, 事件, 具体事件); this表示最...

孟飞阳
2018/05/02
0
0
Polymer1.0 监听属性值的变化

如果需要监听属性值变化可以通过给赋值一个回调函数。 当属性值发生改变时,就会触发这个回调函数,注意只有你一开始写了value这个属性就会触发一次,另外如果值没有改变也是不会执行的。 可...

孟飞阳
2018/05/02
0
0
XCode 单独debug area窗口

选择菜单XCode->Behaviors->Edit Behaviors(或者cmd+, ->behaviors),选择在running start的时候,在show tab name后面填写一个自定义的名字串,并在随后的下拉列表中选择in separate window。...

SimonXun
2016/12/16
3
0

没有更多内容

加载失败,请刷新页面

加载更多

html5代码书写规范

DOCTYPE 页面文档类型统一使用HTML5 DOCTYPE. <!DOCTYPE html> Meta字符集设置 声明方法遵循HTML5的规范, Meta文件使用 "UTF-8" 浏览器显示编码指定. <meta charset="utf-8"> 手机端页面添......

niuhongxia
25分钟前
3
0
怎么修改 phpstorm 中注释的开始位置

PHPStorm 版本:v2018.3 如下图设置:

whoru
34分钟前
2
0
Android Arcface人脸识别sdk使用工具类

public class FaceUtil{ private static final String TAG = FaceUtil.class.getSimpleName(); private static FaceUtil faceInstance = null; public FaceDB mFaceDB; pri......

是哇兴哥棒棒哒
42分钟前
2
0
JFreeChart中文API和树形详解

-------------------------------- JfreeChart 中文API -------------------------------- 要想绘制出漂亮的图表,就必须了解图表的构成部分,将图表进行分解成N个部分。 然后再对每一个部分...

喜欢搬砖的农民工
43分钟前
2
0
Android ViewPager

1.PagerAdapter { public int getCount() { return list.size(); } public Object instantiateItem(ViewGroup container, int postion) { container.addView(iv); return iv; } public void ......

Coding缘
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部