设置属性打破核心选择

Question

我有一个核心，选择在它的shadowdom聚合物元素（raave项列表），它填补了这个核心，选择与其他自定义元素（称为狂欢项）基于它从ajax调用收到的一些数据。 现在，如果我不设置自定义元素的公共属性，但是在设置它们时以非常奇怪的方式突破：如果我单击任何创建的自定义元素元素被选中（以正确的方式，事件触发和所有），它将不会取消选择（选择器在任何地方点击都不会触发事件，并且控制台中没有错误），并且核心选择器中的所有内容都被卡住了。

Exampleof problem

这是一个错误，我应该提交呢？或者我只是做错了什么？

此外，（我怀疑它，但也许值得补充的是，我使用cloud9作为编辑器。

---

代码列表元素：

<link rel="import" href="/bower/polymer/polymer.html"> 
<link rel="import" href="/bower/core-selector/core-selector.html"> 
<link rel="import" href="/public/elements/rave-item.html"> 

<polymer-element name="rave-item-list"> 
    <template> 
     <style type="text/css"> 
      core-header-panel{margin:1em;background:#4F618F}core-toolbar{background:#A9B3CD}#daContent>.selected{font-weight:700;background:#A9B3CD} 
     </style> 
     <core-header-panel flex mode="waterfall"> 
      <core-toolbar>Items</core-toolbar> 
      <core-selector id="daContent" style="padding: 1em;" on-core-select="{{ selectAction }}"></core-selector> 
     </core-header-panel> 
    </template> 
    <script> 
     /*global Polymer*/ 
     Polymer('rave-item-list', { 
      domReady: function(){ 
       this.updateList(); 
      }, 
/*This is the relevant method that populates the core-selector element*/ 
      updateList: function(){ 
       var ajax = document.createElement('core-ajax'); 
       var content = this.$.daContent; 
       ajax.method = "GET"; 
       ajax.url = "/admin/item"; 
       ajax.addEventListener('core-complete',function(){ 
        var items = JSON.parse(ajax.response); 
        for(var i=0; i<items.length; i++) { 
         var newItem = document.createElement('rave-item'); 
         newItem.name = items[i].name; 
         newItem.description = items[i].description; 
         newItem.thumbnail = items[i].thumbnail; 
         newItem.photos = items[i].photos; 
         content.appendChild(newItem); 
        } 
        ajax.remove(); 
       }); 
       ajax.go(); 
      }, 
      selectAction: function(e, detail, sender) { 
       console.log("Item list: ",this.getItemList()); 
       detail.item.toggleSelection(detail.isSelected); 
       if(detail.isSelected){ 
        this.parentNode.getElementsByTagName("rave-item-toolbar")[0].selected = detail.item; 
       } 
      }, 
      getItemList: function(){ 
       return this.$.daContent.items; 
      } 
     }); 
    </script> 
</polymer-element> 

代码自定义元素填充为实例化的狂欢项目列表清单：

<polymer-element name="rave-item" attributes="name description thumbnail photos"> 
    <template> 
     <style type="text/css"> 
      #content{width:calc(100% - 4em);margin:1em;padding:1em;background:#7584AA}#content.selected{font-weight:700;background:#A9B3CD}paper-ripple{color:#fff}paper-input{width:50em}.key{position:relative;top:.5em;display:block;width:100px;float:left}.my-button{background:#7584AA;color:#A9B3CD;font-size:large;position:absolute;top:1em;right:1em} 
     </style> 
    <div id="content"> 
     <span class="key">Name: </span> <paper-input on-input="{{inputChanged}}" label="{{name}}"></paper-input></br> 
     <span class="key">Description: </span> <paper-input on-input="{{inputChanged}}" multiline label="{{description}}"></paper-input></br> 
     <span class="key">Thumbnail: </span> <paper-input on-input="{{inputChanged}}" label="{{thumbnail}}"></paper-input></br> 
     <paper-shadow z="1"></paper-shadow> 
     <paper-button id="save" class="my-button" raisedButton="true" label="Save" icon="done" on-click="{{newPhoto}}" disabled></paper-button> 
    </div> 
</template> 
<script> 
    /*global Polymer*/ 
    Polymer('rave-item', { 
     toggleSelection: function(state){ 
      console.log("Item: ", state); 
      if(state){ 
       this.$.content.setAttribute("class", "selected"); 
      }else{ 
       this.$.content.removeAttribute("class"); 
      } 
     }, 
     inputChanged: function(state){ 
      this.$.save.disabled = false; 
     } 
    }); 
</script> 

Answer 1

那么好像我发现了这个问题，显然是因为我的双向绑定被称为'名字'它是代理堰d。由于“标题”也是一个关键词，我必须在寻找新名称时有所创造。

不过它的怪异如在双向绑定的文档的变量也被称为“名”，所以它不应该是一个问题，我想。

Answer 2

您应该避免使用标准定义的属性，例如name，id，height作为自定义元素的自定义属性。在0.5.1上它在控制台日志中明确地这样说。