I render a HTML select with Handlebars, but I cannot set the selected value, if such value is itself already a rendered data attribute. I found other solutions in SO not satisfactory since they do not address this particular issue.
I tried
<select>
{{#each countriesList}}
<option value="{{#key}}" {{{isSelected ./setCountry #key}}}>
{{this}}
</option>
{{/each}}
</select>
I have the following helper to try to set the selected value
isSelected: function (Country, key) {
return Country === key ? 'selected' : '';
}
I render in expressjs
var countries = {'en': 'England', 'fr': 'France', 'de' : 'Germany'};
var data = {'countriesList':countries, 'setCountry': 'fr'};
res.render('home', data);
It should have set the France option as the selected option, but it doesn't work! I also tried to get the rendered attribute from the helper function, but without success. Any ideas?
I found the solution. Apparently it has to do with the dot. Instead of ./ it should be ../ to make reference to the main data variable. Now it works
<select>
{{#each countriesList}}
<option value="{{#key}}" {{{isSelected ../setCountry #key}}}>
{{this}}
</option>
{{/each}}
</select>
helper:
isSelected: function (Country, key) {
return Country === key ? 'selected' : '';
}
expressjs:
var countries = {'en': 'England', 'fr': 'France', 'de' : 'Germany'};
var data = {'countriesList':countries, 'setCountry': 'fr'};
res.render('home', data);
Related
I need convert Jade select list which iterates over statuses and assigns a status to an account into Handlebars template. In Jade it looks like this:
select.form-control(name='status')
option(value='') -- choose --
for status in data.statuses
option(value='#{status._id}') #{status.name}
I tried to do this with #each like this
<select name="status" class="form-control">
<option value="">-- choose --</option>
{{#each statuses}}
<option value="{{this._id}}">{{this.name}}</option>
{{/each}}
</select>
but it doesn't work because it is not an array.
Is there a way to do this with Handlebars? Thank you.
You can see this example:
http://jsfiddle.net/bby5ynuw/
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = {
statuses:[
{_id:1, name:'name1'},
{_id:2, name:'name2'}
],
statuses2:{
o1:{_id:1, name:'name1'},
o2:{_id:2, name:'name2'},
o3:{_id:3, name:'name3'}
}
};
$('body').append(template(data));
Both variants (array and object) are working correct with your template. May be you set statuses into handlebars incorrect?
I have a task list in Meteor in which I want to be able to update certain tasks. There is a 'priority' field in the collection. I am able to set the value property in the select tag. What I want is to set as 'selected' the option that matches the value of select tag.
Here is my code in the template:
<select value="{{priority}}" id="priorityList">
<option value="Low">Low</
<option value="Medium" >Medium</option>
<option value="High">High</option>
</select>
This is code code in the helper:
Template.add_task.helpers({
update: function() {
if(Session.get('id')) {
var id = Session.get('id');
var task = Items.find({_id: id});
console.log(task);
return task;
}
}
});
I am able to get the data for the fields from the helper but am new to coding and am trying to find a solution to be able to set either "Low", "Medium", or "High" to 'selected' so it will show on the dropdown when I go to update the task.
Thanks for any help that can be provided.
As you have said, priority property of a document will decide which item would get selected in the view by default. You can set another helper to make the tweaks.
<option value="Low" {{ isSelected "Low"}} >Low</option>
<option value="Medium" {{ isSelected "Medium"}} >Medium</option>
<option value="High" {{ isSelected "High"}} >High</option>
Template.add_task.helpers({
update: function(){//previous code},
isSelected: function(value){
var taskPriority = Items.findOne({_id: Session.get('id')}).priority;
return (taskPriority === value) ? 'selected' : '' ;
}
});
This is one possible solution. This problem may have a better solution than this. You are welcome to modify the codebse according to your needs.
I'm trying to study Meteor with a simple example to populate two dropdowns where one is a list of fruit and another one is the color according to the fruit chosen:
collection (ProductList):
a = new Array();
a.push({color:"orange"});
a.push({color:"red"});
ProductList.insert({ product: "Orange", a });
a = new Array();
a.push({color:"green"});
a.push({color:"red"});
ProductList.insert({ product: "Apple", a });
a = new Array();
a.push({color:"green"});
a.push({color:"yellow"})
ProductList.insert({ product: "Banana", a });
html (dropdown menu):
<template name="prodlist">
<select id="category-select">
<option disabled="disabled" selected="selected">Please Select</option>
{{#each prodlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
js:
Template.prodlist.events({
"change #category-select": function (event, template) {
var category_prod = $(event.currentTarget).val();
//this return the correct element selected in the dropdown(i.e Orange Apple Banana)
console.log("category : " + category_prod);
var productID = ProductList.findOne({product: category_prod })._id
console.log("current ID: " + productID);
}
});
Please see the ****** above for my first question This has been solved by chrisklaussner. Code updated.
Also I'm trying to feed the ._id (saved to productID) found to the second dropdown:
html:
<template name="colorlist">
<select id="category-select">
<option disabled="disabled" selected="selected">colors</option>
{{#each colorlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
js:
Template.colorlist.helpers({
colorlist: function () {
const ans = productID.get();
const product = ProductList.findOne({ _id: ans});
if (product) {
return product.a.map(function (doc) {
return doc.color;
});
}
}
});
Please see the ****** above for my second question This has been resolved.
EDIT: This question has been resolved and the Original post contains the correct answer
You have a mistake in the findOne calls. The first parameter (where you pass {}) is the selector that specifies what you want to fetch. The second one is for options.
For example, ProductList.findOne({ product: category_prod })._id should give you the right product ID. In your case, the selector {} matches all products in the collection and findOne returns the first of them. That's why you always get the same ID.
I want to set the value of an HTML <select> element reactively, without changing the various options for the element. I have found a solution, but it in not elegant.
To test, create a barebones Meteor app with create meteor select and change the contents of the select.html and select.js files to the following:
select.html
<body>
{{> select}}
</body>
<template name="select">
<label for="select">{{category}}</label>
<select id="select">
<option value='' disabled selected style='display:none;'>Select...</option>
<option value="Animal">Animal</option>
<option value="Vegetable">Vegetable</option>
<option value="Mineral">Mineral</option>
</select>
</template>
select.js
if (Meteor.isClient) {
Session.set("category", "")
Session.set("label", "Category")
Template.select.onRendered(function () {
setSelectValue()
})
Template.select.helpers({
category: function () {
setSelectValue()
return Session.get("label")
}
});
function setSelectValue() {
var select = $("#select")[0]
if (select) {
select.value = Session.get("category")
}
}
}
Now launch your app. In the browser console, you can change the value of the category Session variable:
Session.set("category", "Animal")
However, the select element will not update until you change the label:
Session.set("label", "category") // was "Category'
Now the select element updates, and any subsequent change the category Session variable will also update the select element.
Session.set("category", "Vegetable") // Now the select element updates
Is it possible to achieve the same effect directly, without using this clumsy workaround?
Yes. You can do it as follows:
<select id="select">
<option value="Animal" {{animalSelected}}>Animal</option>
<option value="Vegetable" {{vegetableSelected}}>Vegetable</option>
<option value="Mineral" {{mineralSelected}}>Mineral</option>
</select>
And helpers that looks something like this:
Template.select.helpers({
animalSelected: function () {
return (someCondition === true) ? 'selected' : '';
},
vegetableSelected: function () {
return (someOtherCondition) ? 'selected' : '';
}
});
A better way might be something like this though:
<select id="select">
{{#each options}}
<option value="{{value}}" {{selected}}>{{label}}</option>
{{/each}}
</select>
And then you can use this in the helpers to decide what is selected and what isn't.
Another option is just using standard jQuery to change the select box. Something like this:
$('[name=options]').val( 3 );
Or this SO answer.
If you want the selection set dynamically I usually use a handlebar helper like this
Template.newtask.helpers({
filler: function(element){
return Session.get(element);
}
});
then in html
<select class="browser-default" id="selectedService" name="jobtype">
<option id="zero" value="{{filler 'type'}}">{{filler 'type'}}</option>
ok so iv got an object which looks like this:
Magnetim.photos = {
facebook:{albums: {id:["id1","id2","id3","id4"] , albumName:["n1","n2","n3","n4"]}},
}
inside a handlebars template im doing this line of code:
<select id="albums-selection">
{{#each photos.facebook.albums.albumName}}
<option id="{{photos.facebook.albums.id}}" value="{{this}}">{{this}}</option>
{{/each}}
</select>
this outputs this result:
<option id="id1,id2,id3,id4" value="n1">n1</option>
<option id="id1,id2,id3,id4" value="n2">n2</option>
<option id="id1,id2,id3,id4" value="n4">n3</option>
<option id="id1,id2,id3,id4" value="n4">n4</option>
but what i'm trying to achieve is for every name set the id element to its own id, so it looks like this:
<option id="id1" value="n1">n1</option>
<option id="id2" value="n2">n2</option>
etc..
While you are in the {{#each}} statement handlebars provides you with #index variable to track the current item index. Knowing this, you should be able to get corresponding item from other array.
So first you need to step outside of your {{#each}}, this is done by using ../, which will move you one level up.
My initial aproach was simply to do something like this
{{../albumName.[#index]}}
But for some reason that didn't work out. So I wrote the helper to simply grab item from array by index you pass there:
Handlebars.registerHelper('getAlbumName', function(array, id) {
return array[id];
});
Now your handlebars template will look like this:
<script id="template">
<select id="albums-selection">
{{#each id}}
<option id="{{this}}" value="{{getAlbumName ../albumName #index}}">
{{getAlbumName ../albumName #index}}
</option>
{{/each}}
</select>
</script>
<div id="output"></div>
And here is the js:
var Magnetim = {};
Magnetim.photos = {
facebook: {
albums: {
id: ["id1", "id2", "id3", "id4"],
albumName: ["n1", "n2", "n3", "n4"]
}
}
};
var source = $("#template").html();
var template = Handlebars.compile(source);
Handlebars.registerHelper('getAlbumName', function(albums, id) {
return albums[id];
});
$("#output").html(template(Magnetim.photos.facebook.albums));
Final jsfiddle with everything in place