У меня есть полимерный элемент (raave-item-list) с основным селектором в его теневой зоне, он заполняет этот основной селектор другим пользовательским элементом (называемым rave-item) на основе некоторых данных, которые он получает от вызова ajax. Теперь я получаю странный результат его работы, если я не устанавливаю общедоступные свойства пользовательских элементов, но очень странным образом ломаюсь, когда я их устанавливаю, а именно: если я щелкаю любой из созданных пользовательских элементов первый элемент в списке выбран (правильно, событие срабатывает и все такое), он не отменяет выбор (селектор не запускает события, куда бы я ни нажимал, и никаких ошибок в консоли), и все в основном селекторе застревает.
Является ли это ошибкой, и я должен зарегистрировать это? Или я просто делаю что-то не так?
Кроме того, (я сомневаюсь, но), возможно, стоит добавить, что я использую 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>
Код для пользовательского элемента, который заполняет список в соответствии с экземпляром rave-item-list:
<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>