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
Related
I am actually trying to do 2 things here:
With 2 dropdown lists,
a) the first would populate with the products, while
b) the second would populate with the colors according to the first dropdown selected.
I starts off insert a document into the collection as below:
ProductList.insert ({ product: "apple", color: "\"red\",\"green\""});
ProductList.insert ({ product: "banana", color: "\"yellow\",\"green\""});
And this is what I have so far:
Main.html
<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>
<template name="colorlist">
<select id="category-select">
<option disabled="disabled" selected="selected">Please Select</option>
{{#each colorlist}}
<option value="{{this}}">{{this}}</option>
{{/each}}
</select>
</template>
Main.js
Template.prodlist.helpers({
prodlist: function(){
return ProductList.find().map(function(doc) {
return doc.product
})
}
});
Template.colorlist.helpers({
colorlist: function(){
return ProductList.find().map(function(doc) {
return doc.color.split(",") //<-- edited with MrE's answer
})
The reason I insert color: "\"red\",\"green\"" is trying to simulate when you populate the dropdown as hardcode: return ["red", "green"], but it return as one element with the string "red","green". Is there a better approach? Also I don't know if there are packages exists that handle dropdown. Thanks in advance.
why do you try to code a string into an array instead of using an array? I'm not sure what that gets you.
If you 'really' want to use a string, you need to parse it ( with doc.color.split(",") ) into an array instead of doing [doc.color]
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>
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.
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
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>