how to update data from meteor in meteor using template helper which contain iteration
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..
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 :
<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 :
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
});
}
});
}
2 answers
solution1
0 2015-06-15 14:53:02
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 the 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 (ie where it is in your template).
solution2
0 2015-06-15 15:05:43
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);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.