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

Question

我正在尝试在我的项目中动态添加 paper-dropdown-inputs。它看起来像这样：

<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) 我需要将它放在对话框中。我现在的问题是如何 return 每次重复选择的值？如果每个东西都有一个 paper-dropdown-input，我可以很容易地做到这一点。但是因为我需要动态添加东西，所以我需要在 dom-repeat 中实现。

Answer 1

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

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) 这也将使用数据绑定来实现。首先，您需要在数组属性上使用上述 notify 属性。其次，每个 'stuff'-object 都应该有自己的选择值。使用正确的数据绑定，对数组值的修改（通过绑定的 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">
        ...

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

Dynamically Adding paper-dropdown-input inside a template dom-repeat

javascript

polymer-2.x