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

Question

i just explored the meteor.js and have some experiment.. i want to update data using textbox.. but the textbox is generated from template helper iteration..我刚刚探索了meteor.js并进行了一些实验..我想使用文本框更新数据..但文本框是从模板助手迭代生成的..

so, the scenario is just like we input data first and then retrive it and we can edit our data.. so when we edit所以，这个场景就像我们先输入数据然后检索它，我们可以编辑我们的数据..所以当我们编辑时

the problem is i cannot get a value from the textbox.. its always "undefined".. here is my html code :问题是我无法从文本框中获取值.. 它总是“未定义”.. 这是我的 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>

and here my js code :这里是我的 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

First, don't name your helper "a", you need to get a proper name.首先，不要将您的助手命名为“a”，您需要取一个合适的名称。 Second, you are not supposed to use a body tag in the meteor.其次，你不应该在流星中使用body标签。 It is generated by the server, and your templates are loaded into it.它由服务器生成，您的模板将加载到其中。

Let's say your parent template is called MainTemplate假设您的父模板称为MainTemplate

Your helper could look like that:你的助手可能是这样的：

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

and you just replace your spacebars iteration with this:你只需用这个替换你的空格键迭代：

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

A good practice when you get something undefined is to try to log its parent ( console.log(this); in your Template.test.rendered function).当你得到一些未定义的东西时，一个好的做法是尝试记录它的父级（ console.log(this);在你的Template.test.rendered函数中）。 It allows you to find the right way to invoke your object (ie where it is in your template).它允许您找到调用对象的正确方法（即它在模板中的位置）。

Answer 2

Do you know why?你知道为什么吗？ You have duplicated ids in your HTML.您的 HTML 中有重复的 ID。 You render input with id att4 and att5 multiple times.您多次使用 id att4和att5呈现输入。 ID should be unique in your HTML document. ID 在您的 HTML 文档中应该是唯一的。 You should replace static IDs with dynamic IDs used inside forEach loop in your test template:您应该使用测试模板中的 forEach 循环内使用的动态 ID 替换静态 ID：

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

{{_id}} will insert current document id as an ID for HTML element. {{_id}}将插入当前文档 ID 作为 HTML 元素的 ID。

You can then access a value of input with $('#' + this._id + numberOfInput).val() inside your UpdateTest event:然后，您可以在 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