Question

创建并使用了我的定制聚合物元素，这是一个表。现在，我想使用我表中目录中的复选框元素。

但是，当我在索引页面中引用复选框html文件时，我一直收到此错误：

DuplicateDefinitionError：一个名称为＆＃39; dom-module＆＃39;的类型已经注册

这就是我创建自定义元素的方式：

<!-- Imports polymer -->
<link rel="import" href="polymer/polymer.html">
<script  src="underscore-min.js"></script>

<!-- Defines element markup -->
<dom-module id="custom-table" >
    <template>
    <style>
    ul {list-style-type:none; display:block}
    ul li {display:inline; float:left; padding:20px; width:1.5em;  border-bottom:1px solid #eee}
    </style>
    <h2>{{title}}</h2>

    <table id="dataTable">
    <thead id="tableHead"></thead>
    <tbody id="tableBody"></tbody>
    </table>

    </template>
</dom-module>

<!-- Registers custom element -->
<script>
Polymer({
    is: 'custom-table',

    // Fires when an instance of the element is created
    created: function() {
    },

    // Fires when the local DOM has been fully prepared
    ready: function() {
    var context= this;
    this.pageNo=0;
    this.totalPages=0;
    // set the default paging size:
    if(this.page== null|| this.page==undefined)
    this.page=10;

    // delegate the change selection handler to the table body
    this.$.tableBody.addEventListener("click",function(e){

    if(e.target && e.target.nodeName == "INPUT") ;
    {
        context.changeSelection(e.target);
    }   

    });
    },

    // Fires when the element was inserted into the document
    attached: function() {},

    // Fires when the element was removed from the document
    detached: function() {},

    // Fires when an attribute was added, removed, or updated
    attributeChanged: function(name, type) {

    alert("changed");

    },

    loadData: function(columns,data){

    this.data = data;
     // add the selected property to the values
     for(var i=0;i<this.data.length; i++) { this.data[i].Selected = false;}
    this.filteredData=this.data;
    this.columns = columns;

    //initialize the filteredData 
    this.filteredData=data;
    // calculate the total number of pages 
    this.totalPages= Math.ceil(data.length/this.page);


    this.drawTableHeader();
    _.defer(this.applyFilters,this);
    _.defer(this.drawTableBody,this);


    },
    drawTableHeader:function(){

    var columns = this.columns;
    // load the header
    var headTr = document.createElement('tr');
    //add a blank header for the check box;
    var th=document.createElement('th');
    headTr.appendChild(th);
    for(var i = 0; i<columns.length ;i++)
    {


        var td=document.createElement('th');
        // if the column is sortable then add the event listener for sorting it
        if(columns[i].Sortable)
        {

            td.addEventListener("click",function(){  this.sortBy(columns[i].Title); });
        }
        td.innerText = columns[i].Title;
        headTr.appendChild(td);
    }
    this.$.tableHead.appendChild(headTr);

    },
    drawTableBody: function(context){
    // this is a defered function
    var context = context;
    // get the number of items according to the current page number

    var pageItems= context.filteredData.slice((context.page*context.pageNo),((context.page*context.pageNo)+context.page));
    console.log(pageItems);
    // print the page items

    for(var i=0; i < pageItems.length; i++)
    {
        var currItem = pageItems[i];
        var tr= document.createElement("tr"); 

        // add the check box first
        var checkbox= document.createElement("input");
        checkbox.type="checkbox";
        checkbox.checked=pageItems[i].Selected;
        var ItemId = currItem.Id;
        checkbox.setAttribute("data-ItemId",ItemId-1);
        var td=document.createElement('td');
        td.appendChild(checkbox);
        tr.appendChild(td);

        // for every column specified add a column to it

        for(var j = 0; j< context.columns.length; j++)
        {
            var td=document.createElement("td");
            td.innerText= pageItems[i][context.columns[j].Title];
            tr.appendChild(td);
        }

        //append the row to the table;
        context.$.tableBody.appendChild(tr);


    } // end for i

    },
    applyFilters:function(context){

        if(context.filter)
        {
            alert("filterApplied");
        }

    },
    changeSelection:function(checkbox){

        var ItemId = checkbox.getAttribute("data-ItemId");
        this.data[ItemId].Selected= checkbox.checked;
        console.log(this.data[ItemId]);
    },
    properties:{

    title :String,
    columns:Array,
    data:Array,
    page:Number,
    filters:Object,
    Selectable:Boolean

    }
});
</script>

以下是我的索引页面：

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <title>&lt;my-repo&gt;</title>

    <!-- Imports polyfill -->
    <script src="webcomponents-lite.min.js"></script>

    <!-- Imports custom element -->

    <link rel="import" href="my-element.html">
    <link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">

</head>
<body unresolved>

    <!-- Runs custom element -->
    <custom-table title="This is data table"></custom-table>
    <script>

document.addEventListener("WebComponentsReady",function(){

var data = [{'Id':1,'firstName':'aman',age:25},{'Id':2,'firstName':'gupta',age:25}];
var cols = [{Title:'firstName',Sortable:true},{Title:'age',Sortable:false}];
var a = document.querySelector('my-element');

a.loadData(cols,data);


});

</script>
</body>
</html>

我刚开始使用聚合物，我不太清楚这里发生了什么...... 提前谢谢你：）

Answer 1

我遇到了问题..

我的自定义元素引用了另一个Polymer.html文件。

愚蠢的我：D

Answer 2

我在Windows上使用Polymer Starter Kit Yeoman generator，我遇到了同样的问题：

错误：DuplicateDefinitionError：名称为“dom-module”的类型已经注册

此错误在Firefox控制台中触发。 Chrome工作正常。

使用生成器创建的组件（例如：yo polymer:el my-element）具有此polymer.html导入：

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

基本路径用“反斜杠”描述。在我自己创建的一些定制聚合物元素中，我导入了Polymer.html：

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

我认为这会导致某种重复。为了解决这个问题，我只使用正斜杠/更改了所有自动创建的导入。

希望这有助于某人。

聚合物1.0 ..使用自定义元素导入目录元素会引发错误

2 个答案: