Question

我有一个聚合物元素（raave-item-list），在它的shadowdom中有一个核心选择器，它根据从ajax调用接收到的一些数据，用另一个自定义元素（称为rave-item）填充该核心选择器。现在，如果我没有设置自定义元素的公共属性，但是当我设置它们时以非常奇怪的方式打破时，我得到了它的奇怪结果：如果我点击任何创建的自定义元素，那么第一个列出的元素选择（以正确的方式，事件触发和所有），它将不会取消选择（选择器在我点击的任何地方都不会触发任何事件，并且控制台中没有错误）并且核心选择器中的所有内容都被卡住了。

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>

由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>

Answer 1

好吧，我似乎发现了这个问题，显然是因为我的双向绑定被称为“名字”，它表现得很奇怪。由于“标题”也是一个关键字，我必须在寻找新名称时具有创造性。

仍然很奇怪，因为在双向绑定的文档中，变量也称为“名称”，所以它不应该是我认为的问题。

Answer 2

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

设置自定义聚合物元素的属性会破坏核心选择器

2 个答案: