如何在下划线模板中将javascript变量解释为属性

假设我有一个将以下属性传递到下划线模板的模板：

name

和

animaltype

。我还有一个属性，它根据animaltype而变化。例如，如果animaltype是CAT，则该属性称为

CAT\u id

。如果animaltype为DOG，则属性为

DOG\u id

，依此类推

我为每个animaltype id创建了一个输入框，但只应填充具有相应animaltype id的框（通过属性映射）。这个ID输入框是我无法映射到属性值的框，因为我正在使用javascript创建属性的名称。因此，将插入实际的javascript变量名，而不是与javascript变量名匹配的相应已解析属性值

这是小提琴

我应该得到的是
名称：Fluffy
类型：CAT
CAT ID:005
狗ID:
鸟号：

我真正得到的是
名称：Fluffy
类型：CAT
CAT ID:CAT_ID
狗ID:
鸟号：
其中cat_id属性未在模板中解析

---

顺便说一句，在我的真实代码中，我隐藏了其他与动物类型不对应的ID输入框，但为了使事情更简单，我没有包括隐藏/显示。

这实际上很简单

编辑 使用参数[0][typeId]

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

不要使用eval，即使没有人对你尖叫；） 这里有一个指向工作小提琴的链接：

感谢@Adrian Lynch提醒我要做一个好公民；）

您有一个常见的“我在另一个变量中有一个变量名”问题，解决方案与往常一样：将需要按名称查找的内容放入查找表（即JavaScript中的对象）

在您的情况下，我不会扩展（属性，{animalTypes:animalTypes}）要将所有内容合并成一堆，我会将

属性

和

动物类型

分开，这样您的

\模板

调用将如下所示：

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

<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>

现在，您可以在模板中使用

属性['cat_id']

之类的语句。当然，您必须通过

animalTypes

或

attributes

引用所有内容，但这是非常次要的。您的模板将如下所示：

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

<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>

姓名：
类型：
身份证件：

解决您眼前问题的部分是：

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

---

更新的演示：

您能在数据传递到模板之前更改数据吗？如果有人因为使用eval（）而对您大喊大叫，您可以随时访问它，因为：arguments[0][key.toLowerCase（）+“_id”]我很难决定接受哪个答案。这是一个很好的答案。非常感谢。总的来说，我觉得我的问题源于我介绍的“另一个变量中的变量名”问题，我认为首先解决这个问题将以一种非常清晰易懂的方式解决我原来的问题。我认为让代码更可读易懂是一种更好的方法，在我看来，这是最清晰的方法，这就是为什么我要回答这个问题。