使用lodash模板，我如何檢查變量是否存在？

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

...