Question

I need to create a modal dialog (just click OK) in a Backbone.js template file. It is in a loop like this, in show_template.jst.ejs:

<% for(var i = 0... all words %>
<% var word = get the ith word %>
<td><span class="synonyms"><%= I18n.t("Synonyms") %></span></td>

I want the user to be able to click on “Synonyms” (in her chosen language) and have a modal dialog box pop up, and show the synonyms from the database, in her language.
To sum up, I want Synonyms to be clickable.

Could someone point me in the right direction? (I am a Javascript/Backbone.js noob)

Answer 1

Basically I see two options for making Synonyms clickable and knowing which one was clicked

One View option – put your data on the dom and read it upon a click action: (notice the data-kind attribute)

<% for(var i = 0... all words %>
<% var word = get the ith word %>
<td>
    <span class="synonyms" data-kind='<%= I18n.t("Synonyms") %>' >
        <%= I18n.t("Synonyms") %>
    </span>
</td>

And the event part of the view will look like this

events: {
   "click .synonums" : "synonyms_event"
},

synonyms_event: function(e) {
    var kind =  $(e.target).data("kind");
    alert(kind + " was pressed");
}

The other option is to create views for each word and let it take care of the click event