In each loop data is not displaying.value="{{param_type}}" not displaying.Please help me.
{{ #each api_method_param_data }}
<select id="param_type">
{{#each dropdown}}
{{#if isSelected this param_type}}
<option value="{{param_type}}" selected="selected"> {{this}} </option>
{{else}}
<option value="{{param_type}}" > {{this}} </option>
{{/if}}
{{/each}}
</select>
{{/each}}
This is the helper function
Template.apimethodchange.isSelected = function(fooToCheck, recordFoo)
{
var checkrec = "";
for(var i=0;i<recordFoo.length;i++)
{
checkrec = checkrec + recordFoo[i];
}
console.log(checkrec + fooToCheck);
return (fooToCheck == checkrec);
};
Template.apimethodchange.dropdown = ["string","array","int","boolean","double","struct"];
Try with ../ to access parent context
<option value="{{../param_type}}" selected="selected"> {{this}} </option>
Related
Dataset:
{
"data": {
"some": [],
"other": [],
"goes": [],
"workoutUnitLabels": [{
"groupLabel": "DISTANCE",
"selected": "",
"unitID": 2,
"unitLabel": "Meters"
}, {
"groupLabel": "DISTANCE",
"selected": "",
"unitID": 3,
"unitLabel": "Miles"
}, {
"groupLabel": "DISTANCE",
"selected": "",
"unitID": 4,
"unitLabel": "Yards"
}, {
"groupLabel": "TIME",
"selected": "selected",
"unitID": 5,
"unitLabel": "Time (hh:mm:ss)"
}, {
"groupLabel": "VELOCITY",
"selected": "",
"unitID": 6,
"unitLabel": "Velocity (m/s)"
}]
}
}
Given the dataset above, I'm trying to pass this to a handlebar template but can't figure out the looping I need to do to get it to work right. Below is what I'm looking to build out:
<select>
<optgroup label="DISTANCE">
<option value="2">Meters</option>
<option value="3">Miles</option>
<option value="4">Yards</option>
</optgroup>
<optgroup label="TIME">
<option value="5">Time (hh:mm:ss)</option>
</optgroup>
<optgroup label="VELOCITY">
<option value="6">Velocity (m/s</option>
</optgroup>
But this is what mine is currently doing (notice the DISTANCE gets repeated).
<select>
<optgroup label="DISTANCE">
<option value="2">Meters</option>
</optgroup>
<optgroup label="DISTANCE">
<option value="3">Miles</option>
</optgroup>
<optgroup label="TIME">
<option value="5">Time (hh:mm:ss)</option>
</optgroup>
<optgroup label="VELOCITY">
<option value="6">Velocity (m/s)</option>
</optgroup>
</select>
And here is what my handlebar template looks like:
{{#each .}}
<label>some label here <input type="text" name="somename" value="{{somevalue}}" /></label>
<select>
{{#workoutUnitLabels}}
<optgroup label="{{groupLabel}}">
<option value="{{unitID}}" {{selected}}>{{unitLabel}} ({{unitID}})</option>
</optgroup>
{{/workoutUnitLabels}}
</select>
{{/each}}
Any advice on what I need to switch up here?
There is no easy way to do that using handlebars, it would be better to tranform your data first. That said, assuming that your data will always be ordered by the groupLabel, it would be possible to do this (even though it's not pretty):
Helper:
Handlebars.registerHelper('notEqPrev', function(index, workoutUnitLabels, options) {
let prev = index - 1 < 0 ? 0 : index - 1;
if (index === 0 || workoutUnitLabels[prev].groupLabel !== workoutUnitLabels[index].groupLabel) {
return options.fn(this);
} else {
return options.inverse(this);
}
});
HTML:
<label>some label here <input type="text" name="somename" value="{{somevalue}}" /></label>
<select>
{{#with data.workoutUnitLabels as |work| }}
{{#each work }}
{{#notEqPrev #index work }}
{{#unless #first }}
</optgroup>
{{/unless}}
<optgroup label="{{groupLabel}}">
{{/notEqPrev}}
<option value="{{unitID}}" {{selected}}>{{unitLabel}} ({{unitID}})</option>
{{#if #last}}
</optgroup>
{{/if}}
{{/each}}
{{/with}}
</select>
I've been around this all day and i can't figure why my each cycle is not working. I'm trying to create a dropdown with some countries.
Helper
Template.register.helpers({
countries: function(){
return Country.find({ });
},
});
View, template register
<select id="country-select">
<option disabled="disabled" selected="selected">Please Select</option>
{{#each countries}}
<option value={{ name }}>{{ name }}</option>
{{/each}}
</select>
I have records in the country collection
meteor:PRIMARY> db.country.find({ }).count() ->
4
The only options that the dropwdown displays is the placeholder.
I'm using mongol this is a country record
Try this...
<option disabled selected>Please select</option>
{{#each countries}}
<option>{{name}}</option>
{{/each}}
It works here
Try
return Country.find().fetch()
in the helper
Thanks
Hope it helps
"The solution that worked for me is by calling the 'material_select' function after the options data has been loaded.
Template.[name].rendered = function() { this.autorun(function() { var optionsCursor = OptionsList.find().count(); if(optionsCursor > 0){ $('select').material_select(); } }); };"
from https://github.com/Dogfalo/materialize/issues/1469
Is using shouldBeDisplay the way to enable / disable a control on the html or it is easier to go with jscript? I have the follow code (spacebar i believe) but it does not trigger anything.
template:
<template name="prodlist">
<select id="category-select">
<option {{ shouldBeDisabled }} selected="selected">Please Select</option>
{{#each prodlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
helper:
Template.registerHelper("shouldBeDisabled", function(prodlist) {
return "disabled"
});
Found the error - the disable should be placed at the select not option:
<template name="prodlist">
<select id="category-select" disabled= {{ shouldBeDisabled }}>
<option selected="selected">Please Select</option>
{{#each prodlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
What is the best way to get and select values from a dropdown list (and also in radio) in Meteor.
I have created a helper:
Template.categories.helpers({
categories: ["facebook", "news", "tv", "tweets"]
});
and in html
...
<select class="form-control" id="category">
{{> categories}}
</select>
...
<template name="categories">
<option disabled="disabled" selected="selected">Please Select</option>
{{#each categories}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</template>
In case of edit, I would like to evaluate it with value coming from database (e.g. news) to be selected.
Thanks in advance.
Template HTML:
<select id="category-select">
<option disabled="disabled" selected="selected">Please Select</option>
{{#each categories}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
Template js:
Template.categories.helpers({
categories: function(){
return ["facebook", "news", "tv", "tweets"]
}
});
Template.categories.events({
"change #category-select": function (event, template) {
var category = $(event.currentTarget).val();
console.log("category : " + category);
// additional code to do what you want with the category
}
});
Template.categories.helpers({
categories: function(){
return ["facebook", "news", "tv", "tweets"]
}
});
And you should consider changing template name and helper, they shouldn't be the same.
I am trying to use a multi select box in meteor and have some of the options be marked with selected based on info from the db for use with slectize.js. however it seems like meteor when building its DOM tree ignores the selected property.
<label>User</label>
<select id="customer_user_id" name="user_id" class="form-control input-sm" multiple>
{{#each users}}
{{#if inList _id ../customer_user_id}}
<option value="{{_id}}" selected>{{full_name}}</option>
{{else}}
<option value="{{_id}}">{{full_name}}</option>
{{/if}}
{{/each}}
</select>
and the helper
Handlebars.registerHelper("inList", function (val, list) {
console.log(list.indexOf(val) > -1)
console.log(list)
console.log(val)
return list.indexOf(val) > -1;
});
i see that the condition is true but there is no options with the selected property
I have been breaking my head on this for more then 24 hours now
I have also tried this method with the same result
<label>User</label>
<select id="customer_user_id" name="user_id" class="form-control input-sm" multiple>
{{#each users}}
<option value="{{_id}}" {{selected _id ../customer_user_id "selected"}}>{{full_name}}</option>
{{/each}}
</select>
with this helper
Handlebars.registerHelper("selected", function (val1, val2, string) {
if (val1 === val2) {
return string;
}
});
Try using selected="selected" instead of just selected:
<option value="{{_id}}" selected="selected">{{full_name}}</option>