設置屬性打破核心選擇

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上它在控制檯日誌中明確地這樣說。