流星：将数组数据显示为 table 在添加新列时给出重复值

Question

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

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

在我的流星应用中的 table 中：

<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-loop.

之外

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

Answer 1

当模板数据更改时，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}});
    }
});

Answer 2

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

如果您检查您的数据库，您会发现重复数据仅在 browser/front-end 中，并没有在后端 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 = "";

    }

流星：将数组数据显示为 table 在添加新列时给出重复值

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

javascript

arrays

meteor

spacebars