Meteor get ID of template parent - meteor

I have two Collection : a collection A which include array of B ids.
Template A :
<template name="templateA">
Name : {{name}} - {{_id}}
{{#each allBsOfThisA}}
{{> Bdetail}}
{{/each}}
Add B for this A
</template>
Note : in this templateA, I list all A and their detail informations. At bottom of the A, I putted a link to add a B.
Template of Bsubmit :
<div class="form-group {{errorClass 'nameOfB'}}">
<label class="control-label" for="nameOfB">nameOfB</label>
<div class="controls">
<input name="nameOfB" id="nameOfB" type="text" value="" placeholder="nameOfB" class="form-control"/>
<span class="help-block">{{errorMessage 'nameOfB'}}</span>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-primary"/>
On the Bsubmit script : I want to get the ID of A. I tried with template.data._id but it's not working :
Template.Bsubmit.events({'submit form': function(e, template) {
e.preventDefault();
console.log("template.data._id: " + template.data._id);
var B = {
name: $(e.target).find('[name=name]').val(),
AId : template.data._id
};
}
});
EDIT :
BSubmit's iron-router part :
Router.route('Bsubmit ', {name: 'Bsubmit '});

Neither the template nor the route does know about the A-instance of the other template/route.
So one solution would be to pass the id to the route, which allows you to fetch the instance or use the id directly:
Template:
<template name="templateA">
Name : {{name}} - {{_id}}
{{#each allBsOfThisA}}
{{> Bdetail}}
{{/each}}
Add B for this A
</template>
Route:
More information about passing arguments to a route
Router.route('/Bsubmit/:_id', function () {
var a = A.findOne({_id: this.params._id});
this.render('Bsubmit', {data: a});
});
Then you could use template.data._id in the event.
Another solution would be to embed the form into the other view, so you can access the data of the parent template in there (documentation of parentData).

Related

How to pass data variable from each to the with in Meteor?

I am trying to pass git variable to settings which is wrapping with with as shown below
If we can see right now it is setting.gitlab but i want to make it dynamically like setting.git where git is a variable mentioned in each loop .
{{#each git in gitlabFields}}
{{#with settings.gitlab}}
<div data-value={{#index}}>{{git}}</div>
<div>hihi</div>
<div class="rc-user-info__row">
<div class="rc-input">
<label class="rc-input__label">
<div >
<div class="rc-input__title" style="display: inline-block;" >{{_ label}}{{equal default value '*'}}</div>
</div>
<!-- {{#each gitlabFields}} -->
<div id="dynamicFields">
<div class="rc-input__wrapper" >
<input type="text" name="{{git}}" value="{{value}}" class="rc-input__element js-input" disabled="{{./disabled}}"/>
</div>
</div>
<!-- {{/each}} -->
</label>
</div>
</div>
{{/with}}
{{/each}}
git variable is not accessible here settings.git
Its showing undefined .
Assuming settings is an accessible Object, you can write a helper, that resolves the value:
Template.myTemplate.helpers({
getGitSettings (settings, key) {
return settings[key]
}
})
If you want to decouple settings from the template or avoid passing it through the whole display list you can also define it within the Template module as private variable:
const gitSettings = { ... };
Template.myTemplate.helpers({
getGitSettings (settings, key) {
return gitSettings[key]
}
})
If this pattern is used among many Templates you can also define a global helper:
const gitSettings = { ... };
Template.registerHelper('gitSettings', function (key) {
return gitSettings[key]
})
and use it via
{{#each field in gitlabFields}}
{{#with gitSettings field}}...{{/with}}
{{/each}}

Meteor Autoform update a nested collection

I'm trying to create a form in order to insert a new element inside a nested array in a collection.
Here are my schemas :
Schemas.CampaignsSchema = new SimpleSchema({
'name': {
type: String
}
});
​
Schemas.ElectionsSchema = new SimpleSchema({
'campaigns': {
type: [Schemas.CampaignsSchema],
defaultValue: []
}
});
Here is my template :
Template.campaignsNew.helpers({
schema() { return Schemas.CampaignsSchema; },
});
​
​
<template name="campaignsNew">
{{#autoForm
collection='Elections'
schema=schema
doc=doc
scope='campaigns'
id='insertCampaignForm'
type='update-pushArray'}}
<fieldset>
<legend>Add a Campaign</legend>
{{> afQuickField name='campaigns.$.name'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
So a field is generated by autoform but nothing happens when I hit submit.
If I enable Autoform.debug() I got :
SimpleSchema.clean: filtered out value that would have affected key "campaigns", which is not allowed by the schema
SimpleSchema.clean: filtered out value that would have affected key "campaigns.$", which is not allowed by the schema
SimpleSchema.clean: filtered out value that would have affected key "campaigns.$.name", which is not allowed by the schema
Does someone have any idea?
It seems that the schema attribute of #autoform doesn't work with the type update-pushArray.
Here is the template that works with the reste of the code :
<template name="campaignsNew">
{{#autoForm
collection='Elections'
doc=election
id='insertCampaignForm'
type='update-pushArray'
scope='campaigns'}}
<fieldset>
<legend>Add a Campaign</legend>
{{> afQuickField name='name'}}
</fieldset>
<button type="submit" class="btn btn-primary">Insert</button>
{{/autoForm}}
</template>
The only issue is that the name field is pre-filled with the Election name...
It seems that your nested document mustn't have a field with the same name as the main document.
Yet the created nested document has the good name and the main document's name remain unchanged.

How can I use autoform to populate a select element with #each?

Here is part of my form that I'd like to convert to using autoform.
<div class="col-lg-4 col-md-4 col-sm-4">
<label for="pay_with" id="pay_with_label">Pay With</label>
<select name="pay_with" id="pay_with" class="form-control select select-primary mbl" required data-placeholder="Select an Option">
<option value="Card">New Card</option>
<option value="Check">New Bank</option>
{{#each device}}
<option value="{{card_id}}" selected {{selected}}>{{brand}} - {{last4}}</option>
{{/each}}
</select>
In autoform, how do I translate this part?
{{#each device}}
<option value="{{card_id}}" selected {{selected}}>{{brand}} - {{last4}}</option>
{{/each}}
Create a template helper function that returns the options array for your select menu, by mapping your devices array and adding in the extra options in order to get the proper schema for autoform, like so:
Template.myForm.helpers({
deviceOptions: function() {
var deviceOpts = devices.map(function(device) {
return { label: device.brand+' - '+device.last4, value: device.card_id }
});
deviceOpts.unshift({ label: 'New bank', value: 'Check' });
deviceOpts.unshift({ label: 'New card', value: 'Card' });
return deviceOpts;
},
});
Then, you can call the helper in your template directive:
{{> afFieldInput name="payWith" type="select" options=deviceOptions }}

show checkbox value checked/unchecked from mongo data in meteor

i have created collection named as "tbl_dynamic" in that a field named "dynamicField" created in that i'm storing data like this
"_id":"LoBTiSo3oqr54Ac5R",
"text":"test",
"dynamicField" : {
"text1" : {
"checkedValue" : false
},
"text2" : {
"checkedValue : true
}
}
and in meteor side i have a template like this
<template name="tmpChecked">
<input id="newField" name="field" type="text" placeholder="Field" readonly="readonly" class="form-control" value={{key}}>
<div class="checkbox">
<label>
<input id="chkChecked" type="checkbox" name="chk_checked" checked={{checkedValue}}>
</label>
</div>
</template>
and my helper contains following code to fetch data from collection
//helper to view fields
Template.tmpChecked.helpers({
values: function() {
return tbl_dynamic.find({},{dynamicField:1,text:1});
}
});
now the problem is when i tried to display checkbox value it doesn't show me the checkedValue.
any suggestion ?
Thanks,
I understand that you want to show list of checkboxes and each checkbox followed by input box.
For this, You need to do following 2 things -
Change the data model little bit. Make the dynamicField properties as the array. Each array element containing information about field name and checked property
{
"_id":"LoBTiSo3oqr54Ac5R",
"text":"test",
"dynamicField" : [
{
"name": "text1",
"checkedValue" : false
},
{
"name": "text2",
"checkedValue : true
}
]
}
2.In template code, iterate over objects dynamicFields array and display them
<template name="tmpChecked">
{{#with values}}
{{ #each dynamicField}}
<input id="newField" name="field" type="text" placeholder="Field" readonly="readonly" class="form-control" value={{name}}>
<div class="checkbox">
<label>
<input id="chkChecked" type="checkbox" name="chk_checked" checked={{checkedValue}}>
</label>
</div>
{{/each}}
{{/with}}
</template>
You can keep helper function as it is. No need to change.
Hope this helps

Adding an user field to a Meteor record?

Right now, my Posts model has a title and a content field:
client/client.js:
Meteor.subscribe('all-posts');
Template.posts.posts = function () {
return Posts.find({});
};
Template.posts.events({
'click input[type="button"]' : function () {
var title = document.getElementById('title');
var content = document.getElementById('content');
if (title.value === '') {
alert("Title can't be blank");
} else if (title.value.length < 5 ) {
alert("Title is too short!");
} else {
Posts.insert({
title: title.value,
content: content.value,
author: userId #this show displays the id of the current user
});
title.value = '';
content.value = '';
}
}
});
app.html:
<!--headder and body-->
<div class="span4">
{{#if currentUser}}
<h1>Posts</h1>
<label for="title">Title</label>
<input id="title" type="text" />
<label for="content">Content</label>
<textarea id="content" name="" rows="10" cols="30"></textarea>
<div class="form-actions">
<input type="button" value="Click" class="btn" />
</div>
{{/if}}
</div>
<div class="span6">
{{#each posts}}
<h3>{{title}}</h3>
<p>{{content}}</p>
<p>{{author}}</p>
{{/each}}
</div>
</div>
</div>
</template>
I tried adding an author field (already did meteor add accounts-password and accounts-login):
author: userId
But it just shows the id of the current user who is logged in.
I would like it to show the email of the author of the post instead.
How to accomplish that?
I think you can get the email with
Meteor.users.findOne(userId).emails[0];
#danielsvane is correct, but since your Post document's author field stores the _id of the author and not the email address, you'll need a template helper in order for the template to know how to get the email address. Try the following:
// html
...
<div class='span6'>
{{#each posts}}
{{> postDetail}}
{{/each}}
</div>
...
<template name="postDetail">
<h3>{{title}}</h3>
<p>{{content}}</p>
<p>{{authorEmail}}</p>
</template>
// javascript
Template.postDetail.helpers({
// assuming the `author` field is the one storing the userId of the author
authorEmail: function() { return Meteor.users.findOne(this.author).emails[0]; }
});
If it's always showing the current user and not the user who is the author of the post, then the problem lies in how you're setting the value of the userId variable in your event handler, which isn't code that you showed in your question.

Resources