如何在聚合物中制作可修改对象列表

How to make a list of modifiable object in Polymer

本文关键字：修改对象列表聚合物更新时间：2023-09-26

这里是host元素。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../common-settings-service/common-settings-service.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html"/>
<link rel="import" href="../bower_components/paper-material/paper-material.html"/>
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="common-settings">
    <style>
        :host {
            display: block;
        }
        paper-material {
            background: #FFFFFF;
        }
        .container {
            @apply(--layout-horizontal);
        }
        .windowItem {
            @apply(--layout-horizontal);
        }
        .list {
            @apply(--layout-flex);
            @apply(--layout-vertical);
        }
        .item {
            @apply(--layout-horizontal);
            margin: 16px 16px 0 16px;
            padding: 20px;
            border-radius: 8px;
            background-color: white;
            border: 1px solid #ddd;
        }
    </style>
    <template>
        <common-settings-service
                    id="commonSettings"
                    url="/board_service/common_settings/"
                    settings="{{settings}}"></common-settings-service>
        <paper-material elevation="1">
            <div>
                <h3> Настройки обработки</h3>
                <h4>Окна</h4>
                    <iron-list items="{{settings.timeWindows}}" as="item">
                        <template>
                            <div>
                                <paper-input type="number"
                                     value="{{item}}" label="Размер окна"></paper-input>
                                <paper-button raised on-tap="removeWindow">Удалить</paper-button>
                            </div>
                        </template>
                    </iron-list>
                <!--<template is="dom-repeat" items="{{settings.timeWindows}}">-->
                    <!--<div class="windowItem">-->
                        <!--<paper-input type="number"-->
                                     <!--value="{{item}}" label="Размер окна"></paper-input>-->
                        <!--<paper-button raised on-tap="removeWindow">Удалить</paper-button>-->
                    <!--</div>-->

                <!--</template>-->

                <paper-button raised on-tap="addWindow">Добавить</paper-button>

                <paper-input type="number"
                             value="{{settings.signalUpperLimit}}"
                             label="Верхнее ограничение сигнала"></paper-input>
                <paper-input type="number"
                             value="{{settings.signalLowerLimit}}"
                             label="Нижнее ограничение сигнала"></paper-input>
                <paper-input type="number"
                             value="{{settings.accumulationTimeSeconds}}"
                             label="Время накопления в секундах"></paper-input>
                <paper-input type="string"
                             value="{{settings.serverIp}}"
                             label="IP адрес сервера обработки"></paper-input>
                <paper-input type="number"
                             value="{{settings.thresholdProcessingSettings.windowSize}}"
                             label="Размер окна для фильтрации порогов"></paper-input>
                <paper-input type="number"
                             value="{{settings.thresholdProcessingSettings.thresholdLowerLimit}}"
                             label="Нижнее ограничение порогов"></paper-input>
                <paper-input type="number"
                             value="{{settings.thresholdProcessingSettings.thresholdUpperLimit}}"
                             label="Верхнее ограничение порогов"></paper-input>
                <paper-input type="number"
                             value="{{settings.activeChannelsLimitPercent}}"
                             label="Ограничение на сработавшие каналы в процентах"></paper-input>
            </div>
        </paper-material>
    </template>
</dom-module>
<script>
    Polymer({
        is: 'common-settings',
        removeWindow: function () {
            this.$.commonSettings.removeWindow(20);
        },
        addWindow: function () {
            this.$.commonSettings.addWindow(20);
            console.log(this.$.commonSettings.settings.timeWindows);
        }
    });
</script>

子元素

<link rel="import" href="../bower_components/polymer/polymer.html">
<script>
    Polymer({
        is: 'common-settings-service',
        behaviors: [MyBehaviors.DefaultServiceBehavior],
        properties: {
            settings: {
                type: Object,
                notify: true,
                value: {
                    segments: [
                           {
                               first_index: 0,
                               last_index: 960
                           }
                    ],
                    timeWindows: [10],
                    signalUpperLimit: 100,
                    signalLowerLimit: -100,
                    accumulationTimeSeconds: 600.0,
                    serverIp: "127.0.0.1",
                    thresholdProcessingSettings: {
                        windowSize: 10,
                        thresholdLowerLimit: -100,
                        thresholdUpperLimit: 100
                    },
                    activeChannelsLimitPercent: 10.0
                }
            }
        },
        getSettingsFromResponse: function (response) {
            return response._embedded.commonSettingses[0];
        },
        removeWindow: function (size) {
            var index = this.settings.timeWindows.indexOf(size);
            this.pop('settings.timeWindows', index);
        },
        addWindow: function(size) {
            this.push('settings.timeWindows', size);
        }
    });
</script>

我可以从数组中添加和删除元素(虽然我现在不知道如何删除特定元素)，我可以看到它也从列表中删除了。但是当我在字段中更改值时，这种更改不会反映在有界列表元素中。我怎样才能改变这一点呢?

将set(path, value)放在on-change事件中，例如:

  <paper-input  on-change="update_property"
                id="settings.signalUpperLimit"
                type="number"
                value="{{settings.signalUpperLimit}}"
                label="Верхнее ограничение сигнала"></paper-input>

在update_property中修改值:

 update_property: function(e, detail, sender) {
    // from sender: take the new value and it's id.
       console.log(sender);
       var id = sender.id;
       //... take the new value
    // locate the property path in the array and change it
       //... set(path, value)
  }