CODEWITHSUNDEEP
javascriptbackbone.js
Crystal
Crystal

Reputation: 29518

binding an event to select option in a template within a template

I'm using backbone. Totally a noob. I have an outer template that shows a modal view. Let's call it template-modal. Then based on the libraries object that gets passed to my modal view, I show rows of data. Each row has two select drop down lists. The 2nd drop down list depends on the name of the drop down list (i.e. when the first drop down list changes, I want to update the 2nd drop down).

The library object has these properties

name (1st drop down)
sequences[] (2nd drop down)

So my inner template (the rows that I was talking about in the drop downs, gets populated like this in my template-inner.

<select id="libraryName" style="display:inline; width: 100px">
                    <% _.each(libraries, function (library) { %>
                    <option><%= library.name %></option>
                    <% }); %>
                </select>

This inner template gets created by doing this inside my template-modal. 

this.$el.html(this.template({ libraries: libraries.toJSON() }));

How can I populate the 2nd drop down list based on the libraries? I thought maybe in my backbone view that is rendering template-inner, I could do something like this:

    events: {
        "change #libraryName" : "handleLibraryName"
    },

Edit: (reclarified question) And then in handleLibraryName, use jQuery to populate the drop down? Is that the best way?

Upvotes: 1

Views: 59

Answers (1)

Loamhoof
Loamhoof

Reputation: 8293

Why don't you make a map {name: sequences[]} so you can use a template to create your second select (or simply its options)? As to where using it, if you want it to by dynamic, I guess using your handleLibraryName method is a good way to go.

Upvotes: 0

Related Questions