CODEWITHSUNDEEP
javascriptember.js
TuteC
TuteC

Reputation: 4382

How to model interrelated select boxes?

I've got a tree-like structure in four interrelated select boxes. The idea is that after selecting category1 it displays valid options in category2, and so on for category3 and category4. This part of a form can repeat itself more than once.

An example: the user can have as many vehicles as it want. First category is type of vehicle (truck, car, etc), second is brand, third is color and fourth is fuel type.

In Backbone I listened to change events, updating successive select options accordingly. And I'm not sure how to structure this behavior in Ember. An example of an app that works with related DOM elements/events like this would be great.

My first attempt was to create a view for the form, that would listen to input (change) events on the select boxes. But the selects are views themselves, and I can't easily refer to the interrelated views. How can I model this?

EDIT:

Solved it in the controller, observing changes in one select to populate the others, like:

Ember.ObjectController.extend({
  optionsA: [A1, A2, A3],
  optionsB: [],
  populate: (function() {
    that = this;
    $.map(window.TREE, function(data, groupName) {
      if ($.inArray(that.get('a'), data.as) >= 0) {
        return that.set('optionsB', data.b);
      }
    });
  }).observes('a').on('init')
});

Upvotes: 0

Views: 72

Answers (1)

Hrishi
Hrishi

Reputation: 7138

You could have an ember's collectionView with an itemViewClass specified. This itemViewClass would be responsible for the show/hide functionality that you need. Each itemView should know how to display the initial collapsed category and know to display the extended list of options when that view (category) is clicked on.

If you have a tree-like structure, you could use recursion to model the views and maintain the parent category - child category relationship.

Upvotes: 1

Related Questions