javascript - 在模板 dom-repeat 中动态添加 paper-dropdown-input

Question

我正在尝试在我的项目中动态添加纸张下拉输入。它看起来像这样:

<dom-module id="stuff-input-list">
<template>

<template is="dom-repeat" items="[[stuffs]]" as="stuff_item">
  <paper-dropwdown-input  label="[[stuff_item.name]]" items='{{stuff_item.list_values}}' filter-property="name">
     <template>
        <template is="dom-repeat" items="[[items]]" as="stuff">
                <paper-item>[[stuff.value_name]]</paper-item>
        </template>
       </template>
  </paper-dropwdown-input>
</template>

</template>


<script>

class StuffList extends Polymer.Element {
            static get is() {
                return 'stuff-input-list';
            }

            static get properties() {
                return {

                };
            }

            constructor() {
                super();
                this.stuffs = {
                  [name:'Stuff 1', list_values: [{value_name: 'Hey'}] ],
                  [name:'Stuff 2', list_values: [{value_name: 'World'}] ],
                  [name:'Stuff 3', list_values: [{value_name: '!'}] ]

                }
            }

            ready() {
                super.ready();

                Polymer.RenderStatus.afterNextRender(this, function() {

                });
            }

        }

        window.customElements.define(StuffList.is, StuffList);

</script>


</dom-module>

其中 stuff 是一个具有属性名称和 list_values 属性的对象，属性是名称等对象的列表。

问题:

1) 目前，上面的示例代码无法渲染列表/paper-item。我需要在列表出现之前输入搜索输入。

2)我需要将其放入对话框中。我现在的问题是如何返回每次重复的选定值？如果我为每件东西都有一个paper-dropdown-input，我就可以轻松实现这一点。但由于我需要动态添加东西，所以我需要在 dom-repeat 中实现这一点。

Answer 1

ad 1) 您需要为要在模板中绑定(bind)的所有数据创建属性。虽然您可以立即初始化它们，但您的初始化代码将为每个类/组件实例运行，因此请确保将其包装在函数中:

static get properties() {
    return {
        stuffs: {
            type: Array,
            notify: true,
            value: () => [{
                name:'Stuff 1', 
                list_values: [{value_name: 'Hey'}],
                selected_value: null
            }, {
                name:'Stuff 2', 
                list_values: [{value_name: 'World'}],
                selected_value: null
            }, {
                name:'Stuff 3',
                list_values: [{value_name: '!'}],
                selected_value: null 
            }]
        }
    };
}

如果您的数据恰好是异步获取的，请保留属性(及其type和notify)并使用this.set('stuffs', data ) 以确保模板的正确更新。

ad 2) 这也可以使用数据绑定(bind)来实现。首先，您的 Array 属性需要上面的 notify 属性。其次，每个“东西”对象应该有自己的选择值(value)。使用正确的数据绑定(bind)，对数组值的修改(通过绑定(bind)的 paper-dropdown-inputs)将相应地传播:

...
<paper-dropwdown-input  label="[[stuff_item.name]]" 
    selected-item="{{stuff_item.selected_value}}" 
    items='{{stuff_item.list_values}}' filter-property="value_name">
        ...