Настройка атрибутов разрыва пользовательских полимерных элементов core-selector

Question

У меня есть полимерный элемент (список элементов-брейков) с ядром-селектором в его теневом пространстве, он заполняет этот ядро-селектор другим пользовательским элементом (называемым rave-item) основанный на некоторых данных, которые он получает от вызова 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

Кажется, что я обнаружил проблему, видимо, потому что моя двусторонняя привязка называлась «имя», она действовала на д. Поскольку «title» также является ключевым словом, я должен был быть творческим в поиске нового имени.

Все еще это странно, как в документах с двухсторонними связями переменная также называется «имя», поэтому я не думаю, что это не проблема.

Answer 2

Вам следует избегать использования стандартных атрибутов, таких как имя, идентификатор, высота, как пользовательские атрибуты для ваших пользовательских элементов. на 0.5.1 он явно говорит так на консольном журнале.