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
Related
This is our Handlebars partial we've called input-field. We're trying to dynamically create name and email fields based on the number of participants selected on the previous page.
<div class="form-group {{errors.fullName.class}}" id="fullName">
<label for="full-name">Your full name</label>
<p class="message-error">{{errors.fullName.message}}</p>
<input type="text" class="form-control" name="fullName" value="{{values.fullName}}">
</div>
We have some functions which create and display error messages if any of those form fields are unfilled. Instead of {{errors.fullName.class}}, we need it to be {{errors.fullName{{this}}.class}}.
We've found that Handlebars doesn't allow you to refer to another handlebars variable inside a handlebars statement this way.
It's all within an each loop:
{{#each otherOccupiers}}
{{> input-field}}
{{/each}}
Does anyone have an idea about how to achieve this effect, maybe by writing a handlebars helper function or some other way to perform this concatenation.
I'm assuming the data object you are passing to handlebars looks something like this:
{
otherOccupiers: ["A", "B"],
errors: {
fullName: {
class: "error-class",
message: "error-message"
}
}
}
However if you change the structure of your data object to look something like this:
{
errors: {
otherOccupiers: [
"A" : {
fullName: {
class: "error-class",
message: "error-message"
}
}
"B" : {
fullName: {
class: "error-class",
message: "error-message"
}
}
]
}
}
Then you can do an each loop like this:
{{#each errors.otherOccupiers}}
<div class="form-group {{this.fullName.class}}" id="fullName">
<label for="full-name">Your full name</label>
<p class="message-error">{{this.fullName.message}}</p>
<input type="text" class="form-control" name="fullName">
</div>
{{/each}}
What i'm trying to do, is get the value of an input on my form and affect it to a variable on my Typescript class, here is my template :
<form [ngFormModel]="form" (ngSubmit)="save()">
<fieldset>
<legend>
Action
</legend>
<div class="form-group">
<label for="label">Label</label>
<input ngControl="label" type="text" class="form-control">
</div>
For example here i want to get the value of the input called label when the user save the form and simply affect it like this :
export class ActionFormComponent {
form: ControlGroup;
_label: any;
constructor() {
}
print() {
this_label = this.form.label;
console.log(this._label);
}
}
ngModel does what you want:
<input ngControl="label" type="text" class="form-control" [(ngModel)]="label">
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).
So I'm trying to be efficient and clean in my Spacebars templates as I work with Meteor. But I'm stumped by the way in which checkboxes and select options are to be dealt with. Suppose I want to have a checkbox set as checked or not depending on a flag that is in a document in one of my collections. I don't appear to be able to do the following:
<input type='checkbox' id='item-{{this.item_id}}' {{#if checked}}checked{{/if}} />
When I try this, I get the following error:
A template tag of type BLOCKOPEN is not allowed here.
If I try the following options, though, they all result in the checkbox being checked even when the flag is false:
<input type='checkbox' id='item-{{this.item_id}}' checked='{{#if checked}}true{{/if}}' />
<input type='checkbox' id='item-{{this.item_id}}' checked='{{#if checked}}true{{else}}false{{/if}}' />
I have the same trouble with selected in my select options, so I end up doing something like the following to get around it, which seems verbose and error-prone:
<select id='option-{{this.item_id}}'>
{{#if option_60}}
<option value='60' selected>1 hour</option>
{{else}}
<option value='60'>1 hour</option>
{{/if}}
{{#if option_90}}
<option value='90' selected>90 mins</option>
{{else}}
<option value='90'>90 mins</option>
{{/if}}
{{#if option_120}}
<option value='120' selected>2 hours</option>
{{else}}
<option value='120'>2 hours</option>
{{/if}}
</select>
You can use non-block helpers for placing such arguments:
UI.registerHelper('checkedIf', function(val) {
return val ? 'checked' : '';
});
<input type="checkbox" {{checkedIf checked}}>
Here is an example of the code I use to solve this problem, this should be pretty straightforward.
JS
Template.myTemplate.helpers({
checked:function(){
// assumes that this.checked is the flag in your collection
return this.checked?"checked":"";
},
options:function(){
// store options in a helper to iterate over in the template
// could even use http://momentjs.com/docs/#/durations/humanize/ in this case ?
return [{
value:60,
text:"1 hour"
},{
value:90,
text:"90 mins"
},{
value:120,
text:"2 hours"
}];
},
selected:function(value){
// compare the current option value (this.value) with the parameter
// the parameter is the value from the collection in this case
return this.value==value?"selected":"";
}
});
Template.parent.helpers({
dataContext:function(){
// dummy data, should come from a collection in a real application
return {
checked:true,
value:90
};
}
});
HTML
<template name="myTemplate">
<input type="checkbox" {{checked}}>
<select>
{{#each options}}
{{! ../ syntax is used to access the parent data context which is the collection}}
<option value="{{value}}" {{selected ../value}}>{{text}}</option>
{{/each}}
</select>
</template>
<template name="parent">
{{> myTemplate dataContext}}
</template>
EDIT : using universal helpers as Hubert OG hinted at :
JS
Template.registerHelper("checkedIf",function(value){
return value?"checked":"";
});
Template.registerHelper("selectedIfEquals",function(left,right){
return left==right?"selected":"";
});
HTML
<template name="myTemplate">
<input type="checkbox" {{checkedIf checked}}>
<select>
{{#each options}}
<option value="{{value}}" {{selectedIfEquals value ../value}}>{{text}}</option>
{{/each}}
</select>
</template>
The best, most efficient and effective way to accomplish this is to setup global template helpers, one each for determining checked and selected values. For documentation on creating global template helpers, see this documentation.
For checked, I suggest implementing it in this way:
Template.registerHelper('isChecked', function(someValue) {
return someValue ? 'checked' : '';
});
For selected, I suggest implementing it in this way:
Template.registerHelper('isSelected', function(someValue) {
return someValue ? 'selected' : '';
});
With these two global template helpers implemented, you can use them in any of your templates within your application like this:
<template name="someTemplate">
<input type="checkbox" {{isChecked someValue}}>
<select>
{{#each someOptions}}
<option {{isSelected someValue}}>{{someDisplayValue}}</option>
{{/each}}
</select>
</template>
I'm using handlebars in a backbone.js rails app, and I have a Boolean field I'm populating with a checkbox.
When I load the edit page, the form is populated with the contents from the server JSON something like
{id:3,user:'test',checkbox:1}
now in my handlebar form, I want to show that the checkbox is 1.
< input type="checkbox" name="checkbox" value="1" {{#if checkbox}} {{bindAttr checkbox checked="isSelected"}}{{/if}} >
but this isn't returning the checked checkbox. I'd really like to just be able to say if checkbox==1, but I don't see how I can do that with handlebars.
Anysuggestions??
What you would usually do, is using a Boolean in the 'model'.
{
isChecked: true
}
and then
<input type="checkbox" {{bindAttr checked="isChecked"}}>
If the Boolean is true, it will render the checked property, and if the Boolean is false, it would omit the property. So if isChecked is true, then Handlebars would output
<input type="checkbox" checked>
and if isChecked were false, we would get
<input type="checkbox">
Which is what we want!
I also wrote a helper to do this. It doesn't use backbone.js, so may be an alternative for some:
Handlebars.registerHelper('checked', function(currentValue) {
return currentValue == '1' ? ' checked="checked"' : '';
});
Usage example:
<input type="checkbox" name="cbxExample" id="cbxExample" {{checked cbxExample}}/>
Would tick a checkbox if the supplied JSON was:
{"cbxExample" : "1"}
Resulting in:
<input type="checkbox" name="cbxExample" id="cbxExample" checked="checked" />
[my first post - hope that's helpful!]