I'm a brand new JavaScript guy (currently playing with Meteor) and would love some critique of the following:
The goal: I've got two collections
- Buckets
- Widgets.
I'm displaying a select
for each bucket, populated with an option
for each widget.
The goal is simply to mark the appropriate option
as selected
if the bucket currently contains that widget.
I wrestled with this a bit and came up with what feels hack-ey
-- I'm explicitly passing the bucket's contents as a Handlebars variable. I feel like there's a better way, but not sure how to get 'er done.
Is there a way to get access to the parent template instance's context from a nested template instance? #each widget
is being called from within #each bucket
but this
only gives me access to the child context.
(This works, I'm just trying to learn here).
HTML:
<template name="choices">
{{#each bucket}}
<label for='{{bucket_name}}'>{{bucket_description}}</label>
<select id='{{bucket_name}}'>
{{#each widget}}
<option value="{{widget_name}}" {{selected ../bucket_contains}}>{{widget_description}}</option>
{{/each}}
</select>
{{/each}}
</template>
JS:
if (Meteor.isClient) {
Template.choices.bucket = function () {
return Buckets.find({});
};
Template.choices.widget = function () {
return Widgets.find({});
};
Template.choices.selected = function (parent) {
return (this.widget_name === parent) ? 'selected' : '';
};
Template.choices.events({
'change select': function (event) {
Buckets.update({bucket_name: event.target.id}, {$set: {bucket_contains: event.target.value}});
}
});
}
bucket_contains
is a property of Buckets and will be the name of a widget if a widget is assigned to a bucket? – John Syrinek May 16 '13 at 20:49