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

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

本文关键字：变量 javascript 解释 属性 下划线      更新时间：2023-09-26

假设我有一个传递到下划线模板的以下属性：name和animaltype。我还有一个属性，它根据动画类型而变化。例如，如果animaltype为CAT，则该属性称为cat_id。如果是，则动画类型为DOG，则属性为dog_id，依此类推

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

这是小提琴http://jsfiddle.net/leopardy/fev4vqmg/1/

我应该得到的是
名称：蓬松
类型：CAT
CAT ID:005
狗ID:
BIRD ID:

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

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

您有一个常见的"我在另一个变量中有一个变量名"问题，解决方案一如既往：将需要按名称查找的东西放在查找表（即JavaScript中的对象）中。

在你的情况下，我不会用_.extend(attributes, {animalTypes:animalTypes});把所有东西都堆成一堆，我会把attributes和animalTypes分开，这样你的_.template调用就会看起来像这样：

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

现在，您可以在模板中说出类似attributes['cat_id']的内容。当然，您必须通过animalTypes或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"/>

更新的演示：http://jsfiddle.net/ambiguous/qj3ru1mL/1/

它实际上是非常直接的

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

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

不要使用eval，即使没有人对你大喊大叫；）以下是工作小提琴的链接：http://jsfiddle.net/j872q5gm/1/

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

相关文章：