Nested template variable access in Meteor

Question

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

1. Buckets
2. 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}});
 }
 });
}

• Johntron: So bucket_contains is a property of Buckets and will be the name of a widget if a widget is assigned to a bucket?

Answer 1

I've been looking at your code for a few weeks now, the problem is both that there is not a lot to review and there's nothing wrong with it.

Do consider using lowerCamelCasing which is the standard in JS, so bucket_name -> bucketName.

The code seems elegant enough to me.