Fatal编程技术网
  • polymer/
  • Polymer 使用webcomponents.js代替webcomponents-lite.js的聚合物破坏了应用程序

Polymer 使用webcomponents.js代替webcomponents-lite.js的聚合物破坏了应用程序

polymer

Polymer 使用webcomponents.js代替webcomponents-lite.js的聚合物破坏了应用程序,polymer,Polymer,您好，我正在尝试硫化我的应用程序，但使用webcomponents-lite.js似乎没有正确填充。阅读后，我发现一个建议说使用webcomponents.js，问题是当我使用时，我会出现以下错误： <!-- Iron --> <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html"> <link rel="impo

您好，我正在尝试硫化我的应用程序，但使用webcomponents-lite.js似乎没有正确填充。阅读后，我发现一个建议说使用webcomponents.js，问题是当我使用时，我会出现以下错误：

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html">
无法获取未定义或空引用的属性“mousedown” 无法获取未定义或空引用的属性“click”

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html">
这就是我是否硫化的问题。必须说，我在使用聚合物时遇到的问题比我想的要多。在Chrome上没有问题，但其他浏览器在每一个转折点上都会和我作对

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html">
这是我的index.html：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="elements/elements.html">
        <link rel="import" href="css/main.html">
        <link rel="stylesheet" type="text/css" href="css/main.css">


    </head>
    <body class="fullbleed">
    <template id="app" is="dom-bind">
    <paper-drawer-panel>
        <paper-header-panel main>
            <paper-toolbar>
                <div>Toolbar</div>
                    <paper-icon-button icon="menu" paper-drawer-toggle>
                </paper-icon-button>
                <span class="flex"></span>
                <paper-button onclick="_logout()">
                    <div>Log out</div>
                </paper-button>
            </paper-toolbar>
            <neon-animated-pages class="flex" selected="{{selected}}">
                <view-profile></view-profile>
                <add-skill></add-skill>
                <search-skill></search-skill>
                <view-users></view-users>
            </neon-animated-pages>
        </paper-header-panel>
        <paper-header-panel drawer>
            <paper-toolbar>
            </paper-toolbar>
            <paper-menu class="list" selected="{{selected}}">
                <paper-item>
                    <iron-icon icon="account-circle"></iron-icon>
                        <span>Profile</span>        
                </paper-item>
                <paper-item>
                        <iron-icon icon="add" on-click="showAddSkill"></iron-icon>  
                        <span>Add Skills</span> 
                </paper-item>
                <paper-item>
                        <iron-icon icon="search"></iron-icon>   
                        <span>Search</span> 
                </paper-item>
                <paper-item>
                        <iron-icon icon="android"></iron-icon>  
                        <span>Users</span>  
                </paper-item>
        </paper-menu>
        </paper-header-panel>
    </paper-drawer-panel>   
    </template>
    <script src="scripts/app.js"></script>
    </body>
    </html>

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html"> 


工具栏
注销
轮廓
添加技能
搜寻
使用者
这是my elements.html：

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html"> 


    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html">
这是引发错误的自定义元素：

    <!-- Iron -->
    <link rel="import" href="../bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/iron-input/iron-input.html">
    <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
    <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
    <link rel="import" href="../bower_components/iron-form/iron-form.html">

    <!-- Neon -->
    <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
    <link rel="import" href="../bower_components/neon-animation/neon-animatable-behavior.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-from-right-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/slide-left-animation.html">


    <!-- Routing -->
    <link rel="import" href="routing.html"> 

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../elements/elements.html">


<dom-module id="add-skill">
    <style>

paper-dropdown-menu{
    width: 20%;
    --paper-input-container-label:{
        color: red;
    };

    --paper-input-container-focus-color: red;
    }

paper-input{
    --paper-input-container-label:{
        color: red;
    };

    --paper-input-container-label-focus:{
        color: red;
    };

    --paper-input-container-underline:{
        color: red;
    };

    --paper-input-container-focus-color: red;

    }

form{
        margin: 0px 0px 0px 100px;

    }
paper-input{
    width: 100px;
        }

        paper-button{
            color: red;
        }

paper-menu-button{
    width: 100%;
    }

    </style>
    <template id="skillForm">

        <paper-material elevation="1">
            <form is="iron-form "id="formPost" method="POST" action="../../scripts/insertSkill.php" onSubmit="window.location='skills.integr8it.local'">
                <paper-dropdown-menu id="vendorMenu" label="Vendor" selected-item-label="{{vendorSelected}}">
                    <paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="itemSelected">
                        <template is="dom-repeat" items="{{vendorList}}">
                            <paper-item id="vendorName" value="[[item]]">[[item]]</paper-item>
                        </template>
                    </paper-menu>
                </paper-dropdown-menu>
            <input id="selectedVendorName" name="selectedVendorName" value="[[vendorSelected]]" type="hidden">[[vendorSelected]]</input>
            <br />

                <paper-dropdown-menu id="certificationMenu" label="Certification" selected-item-label="{{certificationSelected}}">
                    <paper-menu class="dropdown-content" id="certificationSelect">
                        <template is="dom-repeat" items="{{certificationList}}">
                            <paper-item id="certificationName" value="item">[[item]]</paper-item>
                        </template>
                    </paper-menu>
                </paper-dropdown-menu>
             <input name="selectedCertificationName" value="[[certificationSelected]]" type="hidden"></input>
             <br />

                <paper-dropdown-menu id="classMenu" label="Class" selected-item-label="{{classSelected}}">
                    <paper-menu class="dropdown-content" id="classSelect">
                        <template is="dom-repeat" items="{{classesList}}">
                            <paper-item id="className" value="{{item}}">[[item]]</paper-item>
                        </template>
                    </paper-menu>
                </paper-dropdown-menu>
             <input id="selectedClassName" name="selectedClassName" value="[[classSelected]]" type="hidden">[[classSelected]]</input>
             <br />

             <paper-input name="year" label="Year" type="number" maxlength="4" max="2000" min="1990" auto-Validate required error-message="Year must be entered" value="{{year}}}">
                {{year}}
             </paper-input>
             <br />

            <paper-button class="primary" id="submitButton" raised onclick="clickHandler(event)" disabled>Submit</paper-button>
            <paper-item id="error"></paper-item>
            </form>   
        </paper-material>
    <iron-ajax
    id="vendorSubmit"
    method="POST"
    url="../../scripts/addskill.php"
    handle-as="json"
    on-response="handleVendorResponse"
    debounce-duration="300">
    </iron-ajax>

    <iron-ajax
    id="certificationSubmit"
    method="POST"
    url="../../scripts/getCertification.php"
    handle-as="json"
    on-response="handleCertificationResponse"
    debounce-duration="300">
    </iron-ajax>

    <iron-ajax
    id="classSubmit"
    method="POST"
    url="../../scripts/getClass.php"
    handle-as="json"
    on-response="handleClassResponse"
    debounce-duration="300">
    </iron-ajax>

    </template>
    <script>

     function clickHandler(event) {

      Polymer.dom(event).localTarget.parentElement.submit();

    }

    Polymer({
        is:'add-skill',

        behaviors:[Polymer.NeonAnimatableBehavior],

        properties:{
            animationConfig:{
                value:function(){
                    return{
                        'entry':{
                            name:'slide-from-right-animation',
                            node:this
                        },

                        'exit':{
                            name:'slide-left-animation',
                            node:this
                        }
                    };
                }
            }
        },

        ready:function(){
            this.sendVendorRequest();
            this.vendorList = [];
            this.certificationList = [];
            this.sendClassRequest();
            this.classesList = [];
            var cookie = document.cookie;

        },

         sendVendorRequest:function(){
            var datalist = 'vendor='+encodeURIComponent('1');
            this.$.vendorSubmit.body = datalist;
            this.$.vendorSubmit.generateRequest();
        },

        handleVendorResponse:function(request){
            var response = request.detail.response;
            for(var i = 0; i < response.length;i++){
                this.push('vendorList', response[i].name);
            }

        },

        submitForm:function(event){
            Polymer.dom(event).localTarget.parentElement.submit();


        },

        sendCertificationRequest:function(vendor){

            var datalist = 'vendorName='+encodeURIComponent(vendor);
            this.$.certificationSubmit.body = datalist;
            this.$.certificationSubmit.generateRequest();

        },

        handleCertificationResponse:function(request){
            this.splice('certificationList', 0, this.certificationList.length);
            var response = request.detail.response;
            for(var i = 0; i < response.length;i++){
                this.push('certificationList', response[i].name);
            }

        },

        sendClassRequest:function(className){

            var datalist = 'class='+encodeURIComponent('1');
            this.$.classSubmit.body = datalist;
            this.$.classSubmit.generateRequest();

        },

        handleClassResponse:function(request){
            var response = request.detail.response;
            for(var i = 0; i < response.length; i++){
                this.push('classesList', response[i].name);
            }

        },

          itemSelected : function(e) {

            var selectedItem = e.target.selectedItem;
            if (selectedItem) {
            this.sendCertificationRequest(selectedItem.innerText);
            console.log("selected: " + selectedItem.innerText);
            }
                this.validate();
          },

          listeners:{
            'iron-form-submit': '_redirect',
            'iron-form-response': '_redirect'
          },

        validate:function(){
            var selectedVendor = document.getElementById('selectedVendorName');
            if(selectedVendor.text !== null){
                this.$.submitButton.disabled = false;
            }
        },
            showIndex:function(){
                this.$.skillForm.render();
                this.fire('_showIndex');
            },


    });

    </script>
</dom-module>


纸张下拉菜单{
宽度：20%；
--纸张输入容器标签：{
颜色：红色；
};
--纸张输入容器焦点颜色：红色；
}
纸张输入{
--纸张输入容器标签：{
颜色：红色；
};
--纸张输入容器标签焦点：{
颜色：红色；
};
--纸张输入容器下划线：{
颜色：红色；
};
--纸张输入容器焦点颜色：红色；
}
形式{
保证金：0px 0px 0px 100px；
}
纸张输入{
宽度：100px；
}
纸扣{
颜色：红色；
}
纸张菜单按钮{
宽度：100%；
}
[[项目]]
[[vendorSelected]]


[[项目]]


[[项目]]
[[classSelected]]


{{year}


提交
函数clickHandler（事件）{
Polymer.dom（event.localTarget.parentElement.submit（）；
}
聚合物({
是：'add-skill'，
行为：[聚合物.纳米二氧化钛行为]，
特性：{
动画配置：{
值：函数（）{
返回{
“条目”：{
名称：'slide-from-right-animation'，
节点：这个
},
“退出”：{
名称：'slide-left-animation'，
节点：这个
}
};
}
}
},
就绪：函数（）{
这个.sendVendorRequest（）；
this.vendorList=[]；
this.certificationList=[]；
这是sendClassRequest（）；
this.classesList=[]；
var cookie=document.cookie；
},
sendVendorRequest:函数（）{
var datalist='vendor='+encodeURIComponent（'1'）；
此.$.vendorSubmit.body=数据列表；
此.$.vendorSubmit.generateRequest（）；
},
handleVendorResponse:函数（请求）{
var response=request.detail.response；
对于（var i=0；i