Question

我试图显示这个数组数据......

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来添加新的colomns。

如果输入发生变化，数据将存储到集合中：

'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 - 循环。

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

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，而不是简单地从头开始删除和重新生成它。

如果您检查数据库，您将看到重复数据仅在浏览器/前端，而不是在后端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：显示数组数据作为表，在添加新列时给出重复值

2 个答案: