How to get javascript variable to be interpreted as attribute in underscore templates

Question

Lets say I have a the following attributes being passed in to an underscore template: name and animaltype. I also have an attribute that varies based on the animaltype. So for example, if animaltype is CAT, then the attribute is called cat_id. If is the animaltype is DOG, then the attribute is dog_id and so on.

I create an input box for each of the animaltype ids but only the box that has an id of the corresponding animaltype should be populated(mapped in via attributes). This ID input box is the one I cannot get to map to the attribute value because I am using javascript to create the name of the attribute is should be expecting. Therefore the actual javascript variable name is being inserted instead of the corresponding resolved attribute value that matches the javascript variable name.

Here is the fiddle http://jsfiddle.net/leopardy/fev4vqmg/1/

What I should get is
Name: Fluffy
Type: CAT
CAT ID: 005
DOG ID:
BIRD ID:

What I really get is
Name: Fluffy
Type: CAT
CAT ID: cat_id
DOG ID:
BIRD ID:
where the cat_id attribute did not resolve in the template.

As a side note, in my real code I am hiding the other ID input boxes that don't correspond to the animal type but for the sake of keeping things simpler, I didn't including the hiding/showing.

Can you change the data before it's passed to the template?

Adrian Lynch
– Adrian Lynch

2014-09-15 05:16:55 +00:00
Commented Sep 15, 2014 at 5:16 — Adrian Lynch
– Adrian Lynch, Commented Sep 15, 2014 at 5:16

mu is too short · Accepted Answer · 2018-02-01 19:47:19Z

You have the common "I have a variable name in another variable" problem and the solution is the same as it always is: put the things you need to look up by name in a lookup table (i.e. an object in JavaScript).

In your case, I would not _.extend(attributes, {animalTypes:animalTypes}); to mash everything into one pile, I would leave attributes and animalTypes separate so that your _.template call would look like this:

var tmpl = _.template(template);
var html = tmpl({
    animalTypes: animalTypes,
    attributes: attributes
});

Now you can say things like attributes['cat_id'] in your template. Of course, you'll have to refer to everything through animalTypes or attributes but that's pretty minor. Your template would look something like this:

<table>
    <tbody>
            <tr>
                <td>Name:</td>
                <td>
                    <input name="name" type="text" value="<%= attributes.name %>"/>
                </td>
            </tr>
            <tr>
                <td>Type:</td>
                <td>
                    <input name="animal_type" type="text" value="<%= attributes.animaltype %>"/>
                </td>
           </tr>
           <% for (var key in animalTypes) { %>
               <% var typeID= (key).toLowerCase() +"_id" %>
               <tr>
                   <td><%= key %> ID:</td>
                   <% if (attributes.animaltype === key) { %> 
                       <td>
                           <input value="<%= attributes[typeID] %>" name="<%= typeID %>" type="text"/>
                       </td>
                   <% } else { %>
                       <td>
                           <input value="" name="<%= typeID %>" type="text"/>
                       </td>
                   <% } %>
               </tr>
           <% } %>
    </tbody>
</table>

The part the solves your immediate problem is:

<input value="<%= attributes[typeID] %>" name="<%= typeID %>" type="text"/>

Updated demo: http://jsfiddle.net/ambiguous/qj3ru1mL/1/

I believe making code more readable and understandable is a better approach and this is the cleanest way to do it, in my eyes, which is why I made this the answer.

Birgit Martinelle · Accepted Answer · 2014-09-15 12:42:41Z

1

It's actually quite straight forward

EDIT use arguments[0][typeId]

 <input value="<%= arguments[0][typeID] %>" name=<%= (key).toLowerCase() +"_id"%> type="text"/>

Don't use eval, even if no one screams at you ;) Here's a link to the working fiddle: http://jsfiddle.net/j872q5gm/1/

Thanks @Adrian Lynch for reminding me to be a good JS citizen ;)

edited Sep 15, 2014 at 12:42

answered Sep 15, 2014 at 2:40

Birgit Martinelle

1,8991 gold badge12 silver badges9 bronze badges

2 Comments

Adrian Lynch Over a year ago

If anyone screams at you for using eval(), you could always access it as: arguments[0][key.toLowerCase() + "_id"]

snowleopard Over a year ago

I had a difficult time deciding which answer to accept. This is a good answer. Thank you. Overall I feel like my problems stemmed from the "variable name in another variable" issue I introduced and figured fixing that issue first would solve my original problem in a very clean and understandable way.

Collectives™ on Stack Overflow

How to get javascript variable to be interpreted as attribute in underscore templates

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related