Установка атрибутов пользовательского полимерного элемента прерывает выбор ядра

У меня есть полимерный элемент (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>


person Timotheus    schedule 31.08.2014    source источник


Ответы (2)


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

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

person Timotheus    schedule 31.08.2014

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

person Caio Wilson    schedule 24.11.2014
comment
В то время этого не было, но рад видеть, что это происходит сейчас - person Timotheus; 25.11.2014