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

Question

我刚刚探索了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
            });

        }

    });
}

Answer 1

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

假设您的父模板称为MainTemplate

你的助手可能是这样的：

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

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

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

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

Answer 2

你知道为什么吗？ 您的 HTML 中有重复的 ID。 您多次使用 id att4和att5呈现输入。 ID 在您的 HTML 文档中应该是唯一的。 您应该使用测试模板中的 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);
    }

});

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

问题描述

2 个解决方案

解决方案1
0 2015-06-15 14:53:02

解决方案2
0 2015-06-15 15:05:43

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

问题描述

2 个解决方案

解决方案1 0 2015-06-15 14:53:02

解决方案2 0 2015-06-15 15:05:43

解决方案1
0 2015-06-15 14:53:02

解决方案2
0 2015-06-15 15:05:43