I have a select input in one of my Meteor templates which has three pieces of data associated with each select option. I am trying to send all three pieces of data (as an object) to a new template that is rendered via the Blaze API on the 'change' event triggered after the user's selection. I am under the impression I can use the Blaze.getData method to do this, but it doesn't seem to be working for me. I was wondering if anyone has any experience using this method and might be able to help me troubleshoot.
I have a MeteorPad set up with an example of what I am trying to do here:
Also, here is the relevant 'change' event code:
Template.selectItem.events({
'change .select_item': function(event) {
event.preventDefault();
var view = Blaze.getView(event.target);
console.log(view); // me debugging
var item = Blaze.getData(view);
console.log(item); // me debugging
Blaze.renderWithData(Template.selectedResults, item, document.getElementById('results'));
}
});
I have a select input in one of my Meteor templates which has three pieces of data associated with each select option. I am trying to send all three pieces of data (as an object) to a new template that is rendered via the Blaze API on the 'change' event triggered after the user's selection. I am under the impression I can use the Blaze.getData method to do this, but it doesn't seem to be working for me. I was wondering if anyone has any experience using this method and might be able to help me troubleshoot.
I have a MeteorPad set up with an example of what I am trying to do here: http://meteorpad./pad/69XGm5nWPutg8an7T/Select%20Item
Also, here is the relevant 'change' event code:
Template.selectItem.events({
'change .select_item': function(event) {
event.preventDefault();
var view = Blaze.getView(event.target);
console.log(view); // me debugging
var item = Blaze.getData(view);
console.log(item); // me debugging
Blaze.renderWithData(Template.selectedResults, item, document.getElementById('results'));
}
});
2 Answers
Reset to default 5The template in question, selectItem, has no data context, which is why this isn't working. Blaze is rendering {{#each items}} by looking up the appropriate helper function, but this isn't part of the data context of the template, so you can't retrieve it from the event handler.
The easiest way to resolve this is by setting the data context of the selectItem template when it's called from the surrounding body template, like this:
Template.body.helpers({
items: function() {
return Items.find(); //or Items, or whatever
}
});
and
<body>
<h1>Select an item</h1>
{{> selectItem items=items}}
<div id="results"></div>
</body>
That way, the data context you retrieve in the event handler will contain items, although what you then do with it is up to you.
If you wanted to continue doing things the way you are, the sensible thing to do would just be to pick up the items array directly as it's in the JS scope of your event handler. If you really wanted to do things via the helper function, you could try:
Template.selectItem.__helpers[' items'].apply(Template.instance())
However, this would be using private methods and really isn't to be remended. Plus, it would be rerunning the helper anyway, and not really returning the results of the same run, which appears to be what you're after.
You need Blaze.getData to get data from an element, otherwise :
Template.selectItem.events({
'change .select_item': function(event,template) {
this//->data from event.target
template.data //->data from current template
Blaze.getData(event.target)//data from event.target
})
Edit :
I didn't look at your Meteorpad sorry.
Your event is binded to your select. When it's triggered you will get the select as target in event.target and you will get price in event.target.value.
You could use this :
1.build your data in a collection
var Items = new Mongo.Collection(null)
[
{
price: 500,
name: 'apple',
unit: 'bushel'
},
{
price: 1000,
name: 'bananas',
unit: 'kilo'
},
{
price: 2000,
name: 'cake',
unit: 'slice'
}
].forEach(function(o){
Items.insert(o)
});
2.Iterate over the items and give _id as the value
Template.selectItem.helpers({
items: function()
{
return Items.find()
}
});
<template name="selectItem">
<select name="item" class="select_item" style="width: 50%;">
<option></option>
{{#each items}}
<option value="{{this._id}}">{{this.name}}</option>
{{/each}}
</select>
</template>
3.Use Items.findOne(event.target.value) to get the selected Item
Template.selectItem.events({
'change .select_item': function(event,template) {
Blaze.renderWithData(Template.selectedResults, Items.findOne(event.target.value), document.getElementById('results'));
})
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745633955a4637274.html
评论列表（0条）