流星:显示数组数据，因为表在添加新列时给出了重复值

meteor: display array data as table gives duplicate value on adding new column

本文关键字：新列时 添加 数组 显示 数据 因为 流星      更新时间：2023-12-04

我正在尝试显示此数组数据。。。

var data = [
    [ 'field 1', 'field 2', 'field 3' ],
    [ 'field 1', 'field 2', 'field 3' ],
    [ 'field 1', 'field 2', 'field 3' ]
];

在我的流星应用程序的表格中：

<table>
    <tbody>
        {{#each data}}
            <tr>
                {{#each this}}
                    <td><input type="text" value="{{this}}"></td>
                {{/each}}
                <td><input type="text" value=""></td>
            </tr>
        {{/each}}
    </tbody>
</table>

在每一行的末尾应该总是有一个空的input，用于添加新的列。

如果输入发生更改，数据将存储到集合：

'change input': function(event) {
    var data = [],
        tr   = [];
    $('tbody tr').each(function() {
        $(this).find('input[type="text"]').each(function() {
            tr.push($(this).val());
        });
        data.push(tr);
    });
    Table.update(
        { _id: id },
        { $set: 
            {
                data: data 
            }
        }
    );
},

但是，如果我对最后一个输入进行输入，则新字段会添加到数组中，但也会显示新的最后一个字段的值，因此会显示一个重复字段。我不明白为什么，因为在模板标记中，最后一个字段总是空的，因为它没有得到任何值，而且它在each-循环之外。

最后一个输入数组似乎保留了用户键入的值，新的数据数组用于构建模板。

复制的原因似乎是Meteor重新渲染模板的方式。Meteor可能会在必要时更新DOM，而不是简单地从零开始删除和重新生成它。

如果你检查你的数据库，你会发现重复的数据只在浏览器/前端，而没有在后端MongoDB数据库上更新。

处理完change事件后，只需清空输入元素即可更正：

    'change input': function(event) {
        var data = [],
            tr = [];
        $('tbody tr').each(function() {
            $(this).find('input[type="text"]').each(function() {
                tr.push($(this).val());
            });
            data.push(tr);
            // Emptying the tr array after pushing into data array
            tr = [];
        });
        Table.update({ _id: id }, {
            $set: {
                data: data
            }
        });
        // Emptying the value of the input element which triggered the event
        event.currentTarget.value = "";
    }

Meteor在更改模板数据时不会重新渲染输入模板。它只是更新模板和直接受数据变化影响的元素，其余html保持不变。因此，在您的情况下，每次插入时都需要清除最后一个输入字段。我更新了你的代码以显示正确的结果。-

<template name="testgrid">
    <table>
        <tbody>
        {{#each data}}
            <tr>
                {{#each this}}
                    <td><input type="text" value="{{this}}"></td>
                {{/each}}
                <td><input type="text" value="" class="newValue"></td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</template>
var dataTable = [
    [ 'field 1', 'field 2', 'field 3' ],
    [ 'field 1', 'field 2', 'field 3' ],
    [ 'field 1', 'field 2', 'field 3' ]
];
var Table = new Mongo.Collection(null);
Table.insert({
    data: dataTable
});
Template.testgrid.rendered = function() {
}
Template.testgrid.helpers({
   data : function () {
       return Table.findOne({}).data;
   }
});
Template.testgrid.events({
    'change input': function(event) {
        var tempData = [],
            tr   = [];
        $('tbody tr').each(function() {
            tr = [];
            $(this).find('input[type="text"]').each(function() {
                var tempValue = $(this).val();
                if(tempValue)
                    tr.push(tempValue);
            });
            tempData.push(tr);
        });
        $('.newValue').val("");
        var table = Table.findOne({});
        Table.update(table, {$set: {data: tempData}});
    }
});
相关文章：