如何使用包含迭代的模板助手更新流星中的流星数据答案

【问题标题】：how to update data from meteor in meteor using template helper which contain iteration如何使用包含迭代的模板助手更新流星中的流星数据
【发布时间】：2019-11-16 21:26:38
【问题描述】：

我刚刚探索了meteor.js并进行了一些实验..我想使用文本框更新数据..但是文本框是从模板助手迭代生成的..

所以，这个场景就像我们先输入数据然后检索它，我们可以编辑我们的数据..所以当我们编辑时

问题是我无法从文本框中获取值。它总是“未定义”。这是我的 html 代码：

<body>
    <form class="InsertTEST">
        <input type="text" name="att1" placeholder="fill the att1"/>
        <input type="text" name="att2" placeholder="fill the att3"/>
        <input type="submit" value="submit"/>
    </form>
    <table>
        {{#each a}}
            {{> test}}
        {{/each}}
    </table>
</body>

<template name="test">
    <tr class="testRow">
        <td><input type="checkbox" class="toogle-check"></td>
        <td><input type="text" id="att4" value="{{att1}}"/></td>
        <td><input type="text" id="att5" value="{{att2}}"/></td>
        <td><a href="#">{{att3}}</a></td>
        <td><button class="UpdateTEST">Update</button></td>
        <td><button class="DeleteTEST">Remove</button></td>
    </tr>
</template>

这里是我的 js 代码：

TEST = new Mongo.Collection('TEST');

if (Meteor.isClient) {
    Template.body.helpers({
        a: function() {
            return TEST.find();
        }
    });

    Template.body.events({
        'submit .InsertTEST' : function(event){

            var _att1 = event.target.att1.value;
            var _att3 = new Date();
            var _att2 = Number(event.target.att2.value) + 10;

            Meteor.call('InsertTEST', _att1, _att2, _att3);

            event.target.att1.value = "";
            event.target.att2.value = "";


            return false;
        }


    });

    Template.test.events({

        'click .UpdateTEST' : function(e,t) {
            var _att4 = $('#att4').val();
            alert(_att4);


            /*
            var query = {
                att1 : _att4,
                att2 : _att5
            };
            */
            TEST.update(this._id, {$set:query});
            return false;
        }

    });

}

if (Meteor.isServer) {
    Meteor.methods({
        'InsertTEST' : function(_att1, _att2, _att3) {

            TEST.insert({
                att1:_att1, att2:_att2
            });

        }

    });
}

【问题讨论】：

标签： javascript jquery meteor textbox updates

【解决方案1】：

你知道为什么吗？您的 HTML 中有重复的 id。您多次使用 id att4 和 att5 渲染输入。 ID 在您的 HTML 文档中应该是唯一的。您应该用 test 模板中 forEach 循环中使用的动态 ID 替换静态 ID：

<td><input type="text" id="{{_id}}4" value="{{att1}}"/></td>
<td><input type="text" id="{{_id}}5" value="{{att2}}"/></td>

{{_id}} 将插入当前文档 ID 作为 HTML 元素的 ID。

然后您可以在 UpdateTest 事件中使用 $('#' + this._id + numberOfInput).val() 访问输入值：

Template.test.events({

    'click .UpdateTEST' : function(e,t) {
        var _att4 = $('#' + this._id + 4).val();
        var _att5 = $('#' + this._id + 5).val();
        alert('_att4 = ' + _att4 + ', _att5 = ' + _att5);
    }

});

【讨论】：

嗨 Tomas Hromnik，感谢您的帮助.. 我已经尝试过了，但它仍然返回未定义的值..
哦，抱歉，我的代码有一个小错误，现在试试吧。它应该工作;-)
嗨 Tomas，感谢您的帮助，它现在可以工作了 :D.. 顺便说一句，它的语法是 jquery 还是 javascript？对不起我的愚蠢问题..我还是编程世界的新手

【解决方案2】：

首先，不要将您的助手命名为“a”，您需要获得正确的名称。其次，您不应该在流星中使用body 标签。它由服务器生成，您的模板被加载到其中。

假设您的父模板名为MainTemplate

您的助手可能如下所示：

Template.MainTemplate.helpers({
    "item":function(){
       return TEST.find();
     }
});

你只需用这个替换你的空格键迭代：

    {{#each item}}
        {{> test}}
    {{/each}}

当你得到一些未定义的东西时，一个好的做法是尝试记录它的父级（console.log(this); 在你的Template.test.rendered 函数中）。它允许您找到调用对象的正确方法（即它在模板中的位置）。

【讨论】：

嗨，Billybobbonnet，感谢您的回答.. 我会听取您关于正确名称和标签正文的建议：D.. 关于渲染的东西，我会先尝试.. 谢谢