Question

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

所以，场景就像我们首先输入数据然后重新检索它们一样，我们可以编辑我们的数据..所以当我们编辑时

问题是我无法从文本框中获取值..它总是＆＃34;未定义＆＃34; ..这里是我的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

First, don't name your helper "a", you need to get a proper name. Second, you are not supposed to use a body tag in meteor. It is generated by the server, and your templates are loaded into it.

Let's say your parent template is called 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). It allows you to find the right way to invoke your object (i.e. where it is in your template).

Answer 2

Do you know why? You have duplicated ids in your HTML. You render input with id att4 and att5 multiple times. ID should be unique in your HTML document. You should replace static IDs with dynamic IDs used inside forEach loop in your test template:

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

You can then access a value of input with $('#' + this._id + numberOfInput).val() inside your UpdateTest event:

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 个答案: