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是一个具有attr名称的对象，而list_values attr是一个像name这样的对象列表。

问题：

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

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

Answer 1

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

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）这也将使用数据绑定来实现。首先，您需要在Array属性上使用上述notify属性。其次，每个＆＃39; -object应该有自己的选择值。使用正确的数据绑定，将相应地传播对Array值的修改（通过绑定的纸张下拉输入）：

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

在模板dom-repeat中动态添加纸张下拉输入

1 个答案: