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

时间:2013-06-07 05:56:54

标签: javascript underscore.js

我在模板中显示了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是未定义的。我在模板中检查未定义错误吗?我觉得我在骨干模态视图中以相同的方式检查它,但出于某种原因,在我的实际模板中,它似乎不起作用。我的模板符号是否正确?感谢。

3 个答案:

答案 0 :(得分:29)

如果您将变量传递给函数,则会对其进行评估,并且因为没有这样的变量会抛出错误。相反,在骨干视图中,您访问的对象的属性将始终有效(如果不存在具有该名称的属性,则返回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) { %> …

答案 1 :(得分:0)

我有类似的问题,我找到了以下解决方案:

而不是:if (typeof libraryPreps !== "undefined") {

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

答案 2 :(得分:0)

我知道这涉及一个旧线程。但是这个问题仍然活跃。

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

此代码检查变量是未定义的还是空的。如果变量未定义或为null,则返回变量名称。 (使用模板语法)。

此更改已针对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+='";
}