检查下划线模板中未定义的变量答案

【问题标题】：checking for undefined variable in underscore template检查下划线模板中未定义的变量
【发布时间】：2013-06-07 05:56:53
【问题描述】：

我在我的模板中显示 libraryPrep 对象的模式视图，如下所示：

if (_.isUndefined(this.libraryPreps)) {
                this.$el.html(this.template({  }));
            } else {
                this.$el.html(this.template({ libraryPreps: this.libraryPreps.toJSON() }));
            }

当我有一个 libraryPreps 对象时，else 语句有效。在我的模板中，我是这样使用它的：

<select id="libraryPreps" >
                    <%  if (!_.isUndefined(libraryPreps)) { %>
                    <% _.each(libraryPreps, function (libraryPrep) { %>
                    <option value="<%=libraryPrep.id%>"><%= libraryPrep.name %></option>
                    <% }); %>
                    <% } %>
                </select>

当我没有 libraryPreps 对象时，我没有让我的模板呈现，并且我在控制台上收到 libraryPreps 未定义的错误。我是否在模板中错误地检查未定义？我觉得我在主干模式视图中以同样的方式检查它，但由于某种原因，在我的实际模板中，它似乎不起作用。我的模板符号正确吗？谢谢。

【问题讨论】：

标签： javascript underscore.js

【解决方案1】：

如果您将变量传递给函数，它会被评估并会抛出错误，因为没有这样的变量。相反，在您的主干视图中，您正在访问一个始终有效的对象的属性（如果不存在具有该名称的属性，则返回 undefined 值）。

相反，您将不得不在其上使用typeof 运算符，它甚至可以用于未声明的变量（查看variable === undefined vs. typeof variable === "undefined" 和JavaScript check if variable exists (is defined/initialized)）：

<select id="libraryPreps"><%
    if (typeof libraryPreps !== "undefined") {
        _.each(libraryPreps, function (libraryPrep) { %>
            <option value="<%=libraryPrep.id%>"><%= libraryPrep.name %></option><%
        });
    }
%></select>

要在模板中使用_.isUndefined，您需要使该值在模板中明确可用。来自the docs：

默认情况下，template 通过with 语句将数据中的值放在本地范围内。但是，您可以使用 variable 设置指定单个变量名称。这可以显着提高模板的渲染速度。
_.template("Using 'with': <%= data.answer %>", {answer: 'no'}, {variable: 'data'});
=> "Using 'with': no"

因此，您可以编写如下模板：

 <% if (!_.isUndefined(data.libraryPreps)) { %> …
 <% if ("libraryPreps" in data) { %> …

【讨论】：

【解决方案2】：

我遇到了类似的问题，我找到了以下解决方案：

代替：if (typeof libraryPreps !== "undefined") {

使用：if (!_.isUndefined(obj.libraryPreps)) {

【讨论】：

【解决方案3】：

我知道这涉及到一个旧线程。但是这个问题仍然存在。

我已经为自己的堆栈创建了一个解决方案。可能对其他程序员有用。

此代码检查变量是否未定义或为空。如果变量未定义或为空，则返回变量名称。（使用模板语法）。

此更改针对 underscorejs v1.6.0 进行了测试。稍作更改，这将适用于 1.9.1。进一步寻找 Lodash。只需稍作调整即可使用！

在下划线的开发版本中：

v1.6.0 规则：1239

较新版本规则：1575

旧代码：

if (escape) {
  source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
}
if (interpolate) {
  source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
}
if (evaluate) {
  source += "';\n" + evaluate + "\n__p+='";
}

新代码：

if (escape) {
    source += "'+\n((typeof " + escape + " === \"undefined\" || " + escape + " === null) ? \"<%-" + (escape.toString()) + "%>\": _.escape(" + escape + "))+\n'";
}
if (interpolate) {
    source += "'+\n((typeof " + interpolate + " === \"undefined\" || " + interpolate + " === null) ? \"<%=" + (interpolate.toString()) +"%>\":" + interpolate + ")+\n'";
}
if (evaluate) {
    source += "';\n" + evaluate + "\n__p+='";
}

【讨论】：