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 (typeof(headline) !== "undefined") { %>のようifステートメントを好きではありません。しかし、単に<% if (headline) { %>と書くと、見出しが定義されていないと言われます。

HTMLを乱雑にしないlodashテンプレートを使用して変数が存在するかどうかを確認する簡単な方法はありますか？

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

...