Question

我正在使用Lodash模板。

的模板：

<script type="text/template" id="example-template">
  <% if (typeof(leadingIconClass) !== "undefined") { %>
    <span class="glyphicon glyphicon-<%= leadingIconClass %>" aria-hidden="true"></span>
  <% } %>

  <% if (typeof(headline) !== "undefined") { %>
    <strong><%= headline %></strong>
  <% } %>

  <%= message %>

  <% if (typeof(mainHTML) !== "undefined") { %>
    <div class="group" style="margin-top: 20px;">
      <%= mainHTML %>
    </div>
  <% } %>
</script>

要提供给模板的数据：

var data = {
  message: 'Are you sure?'
};

编译模板并附加到容器：
$container.prepend(_.template($("#example-template").html())(data));

我上面写的方法（来自：https://stackoverflow.com/a/7230755/83916）效果很好，但我真的不喜欢if中的<% if (typeof(headline) !== "undefined") { %>语句。但是当我简单地写<% if (headline) { %>时，它会说标题是未定义的。

有没有更简单的方法来检查变量是否存在使用lodash模板不会混淆html？

Answer 1

尝试在JavaScript中访问未定义的变量将导致异常，除非使用typeof。没有真正的方法。

但是，如果将整个模板包装在另一个对象中，那么使用if所需的方式应该可行（因为对象上缺少的属性会导致undefined，而不是例外）：

var data = {
  data: {
    message: 'Are you sure?'
  }
};

然后在你的模板中：

<script type="text/template" id="example-template">
  <% if (data.leadingIconClass) { %>
    <span class="glyphicon glyphicon-<%= data.leadingIconClass %>" aria-hidden="true"></span>
  <% } %>

...

使用lodash模板，如何检查变量是否存在？

1 个答案: