码迷,mamicode.com
首页 > 其他好文 > 详细

polymer-developer guide-registration and lifecycle

时间:2015-07-18 00:21:14      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:

注册和声明周期

my = Polymer({
     is: "proto-element",
     created: function() {
      this.innerHTML = ‘created‘;
     }     
   });
//注册之后会返回构造函数,创建实例的两种方法
var el1 = document.createElement(‘proto-element‘);
var el2 = new my();

使用polymer注册自定义元素,created function 中的this.innerHTML=‘sfp‘,不会被执行

传递参数需要使用factoryImpl,这样的话,只能通过构造函数来创建实例

在元素初始化(本地dom建立,默认值设定)之后,才调用factoryImpl

现在只支持扩展本地元素(给input加其他的样式),而不支持扩展自定义元素。扩展实例

MyInput = Polymer({
  is: ‘my-input‘,
  extends: ‘input‘,
  created: function() {
    this.style.border = ‘1px solid red‘;
  }
});

var el1 = new MyInput();
console.log(el1 instanceof HTMLInputElement); // true

var el2 = document.createElement(‘input‘, ‘my-input‘);
console.log(el2 instanceof HTMLInputElement); // true

//使用
<input is="my-input">

声明周期内的回调函数:created,attached,detached,attributeChanged,ready

ready: function() {
  <!-- access a local DOM element by ID using this.$ -->
  //自动发现节点
  this.$.header.textContent = ‘Hello!‘;
}

polymer()中可以加的函数有以上5个,或者createdCallback, attachedCallback, detachedCallback, attributeChangedCallback。

元素初始化的顺序:

created callback
local DOM constructed
default values set
ready callback
factoryImpl callback
attached callback

回调函数的注册?看不懂

设定属性

Polymer({
    is: ‘x-custom‘,
    hostAttributes: {
      role: ‘button‘,
      ‘aria-disabled‘: true,
      tabindex: 0
    }
  });
//效果:<x-custom role="button" aria-disabled tabindex="0"></x-custom>

只设定元素的原型,而不立即注册它

var MyElement = Polymer.Class({
  is: ‘my-element‘,
  // See below for lifecycle callbacks
  created: function() {
    this.innerHTML = ‘My element!‘;
  }
});
//现在注册
document.registerElement(‘my-element‘, MyElement);
var el = new MyElement();

 

polymer-developer guide-registration and lifecycle

标签:

原文地址:http://www.cnblogs.com/wang-jing/p/4655819.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!