Question

Polymer文档声明元素初始化顺序为

创建了回调。
本地DOM初始化（这意味着本地DOM 创建子项，其属性值按照中的指定设置模板已准备就绪了。
准备回拨。
factoryImpl回调。附加回调。

但这就是我的运行

<html>
<head>
    <!-- <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> -->
    <link rel="import" href="bower_components/polymer/polymer.html"/>
    <script>
        jsElement=Polymer({
            is:"js-element",

            extends:'input',

            hostAttributes: {
              'string-attribute': 'Value',
              'boolean-attribute': true,
              tabindex: 0
            },//this results in <js-element string-attribute="Value" boolean-attribute tabindex="0"></js-element> refer https://www.polymer-project.org/1.0/docs/devguide/properties.html#attribute-serialization

            //callback
            created:function(){
                this.textContent="Helloooo..."+this.b;//this.b y undefined
                this.style.border = '1px solid red';
                console.log(this.localName + '#' + this.id + ' was created');
            },

            ready: function() {
                console.log(this.localName + '#' + this.id + ' has local DOM initialized');
            },

            attached: function() {
                console.log(this.localName + '#' + this.id + ' was attached');
            },

            detached: function() {
                console.log(this.localName + '#' + this.id + ' was detached');
            },

            attributeChanged: function(name, type) {
                console.log(this.localName + '#' + this.id + ' attribute ' + name +
                  ' was changed to ' + this.getAttribute(name));
            },

            //provide add variable property to constructor
            factoryImpl:function(a,b){
                this.b=b;
                console.log(this.b);
            }
        });

        //working without both if no variable required
        var element=new jsElement(2,"aaaa");
        //or
        //var element=document.createElement('js-element');
    </script>
    <link rel="import" href="bower_components/iron-icon/iron-icon.html"/>
</head>
<body>
    <!--To run js-element tag comment extends input -->
    <!-- <js-element>yo</js-element> -->
    <input is="js-element"></input>
    <iron-icon src="2.jpg"></iron-icon>
</body>
</html>

我输出为

input# was created
input# has local DOM initialized
input# attribute string-attribute was changed to Value
input# attribute boolean-attribute was changed to 
input# attribute tabindex was changed to 0
aaaa
input# was created
input# has local DOM initialized
input# attribute string-attribute was changed to Value
input# attribute boolean-attribute was changed to 
input# attribute tabindex was changed to 0
input# was attached

有人可以帮助我理解为什么创建和准备被调用两次？另外，为什么this.b的值在第二次创建的函数中未定义？

Answer 1

为什么创建和准备被调用两次？

创造＆amp; ready是为每个创建的元素实例调用的初始化回调。你在这里创建了2个元素，因此每个元素都会被调用一次。

为什么this.b的值在创建的函数中未定义

在初始化元素之后（即在调用create＆amp; ready之后）调用factoryImpl方法，因此在调用create时this.b还没有值。

聚合物元素注册和生命周期（创建并准备好两次调用）

1 个答案: